Ползунок диапазона ионов не работает с центральной меткой

Я настроил ползунок диапазона ионов в соответствии с потребностями. просто нужны простые функции
1. Метка должна быть в центре .
2. Маркер щелчка на метке должен перемещаться соответствующим образом.
3. Цветовой разрыв между двумя значениями в цветовой строке.

Я попытался создать здесь ссылку «вырезать слайдер, подобный данной ссылке»: (https://www.jamesallen.com/loose-diamonds/all-diamonds/)

Я создал образец скрипта здесь, см. ссылку:

[a link](https://jsfiddle.net/rudratosh/7wg1p86e/3/)

https://jsfiddle.net/rudratosh/7wg1p86e/3/

что не работает, так это:
1. сначала, если мы нажмем на метку «FAIR», чтобы она не должна двигаться в первую очередь. отличается от поведения.

  1. то же самое, если я нажму на «справедливо», он работает нормально, но немного правее, он движется неправильно. см. приведенную ссылку для большей ясности.

заранее спасибо


html jquery twitter-bootstrap rangeslider ion-range-slider
person Coder    schedule 18.10.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Для того, чтобы сделать то, что вы намеревались сделать, необходимо выполнить несколько шагов: 1. Добавьте дополнительный элемент к своим значениям (установите его пустым. Вы заметите, что в ползунке сетки значение будет НОЛЬ. 2. В вашем файле CSS, добавьте display none к первому элементу сетки 3. Измените js-функцию rangeslider.

//Define list in your backend
$scale_list = array("","FAIR", "GOOD", "VERY GOOD", "EXCELLENT");`

//HTML component
<div data-parent="cut" class="inline">
    <p class="sub-panel-title" data-filter="cut">Cut <i class="fa fa-question"></i></p>
    <div class="slider cut-filter">
        <input type="text" class="inline cut grid-slider js-range-slider" data-filter="cut" data-type="doubled" data-grid="true" data-values="{','|implode:$scale_list}" data-from="0" data-to="{count($scale_list)-1}" name="cut" data-from-max="{count($scale_list)-2}" data-to-min="1" value=""/>
    </div>
</div>

//CSS 
.irs-grid-text.js-grid-text-0{display: none}

//JS Code
$(".cut-filter .grid-slider.js-range-slider").ionRangeSlider({
    skin:"sharp",
    onStart:function(data){
        var slider_obj = data.input.parents(".slider").find("span.irs-grid-text");
        $.each(slider_obj, function() {
            if(!$(this).hasClass("js-grid-text-0")){
                var left_percent = $(this).get(0).style.left;
                var minus_value =5;
                var modified_percent = parseInt(left_percent)-minus_value;
                $(this).css("left", modified_percent+'%');
            }
        });
    },
    onFinish: function (data) {
        var instance = data.input.data("ionRangeSlider");
        //var referrer = $('.diamonds .filters').data('referrer');
        instance.options['to_min']= data.from+1;
        instance.options['from_max']= data.to-1;

        data.input.addClass('modified');
        //fetchDiamonds();
    }
});
person mohamad khaled    schedule 31.12.2019

arrow_upward
0
arrow_downward

это очень индивидуальная функциональность, которая не поддерживается из коробки. Возможное решение - дополнительная сетка, построенная снаружи. https://jsfiddle.net/IonDen/xnadtv74/

Щелчок по этой сетке может вызвать метод ползунков update для изменения положения маркера.

person IonDen    schedule 07.11.2019