0

我已经根据需要定制了离子范围滑块。只需要简单的功能
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。首先如果我们点击“公平”标签，所以它不应该首先移动到任何地方。不像是行为。

  1. 同样，如果我点击 fair 左边它的工作正常，但有点正确它的移动错误。请参阅给定的参考文献以获得更清晰的信息。

提前致谢

4

2 回答 2

1

为了做到这一点，您将需要遵循一些步骤： 1. 在您的值中添加一个额外的项目（将其设置为空。您会注意到在网格滑块中该值将为零。2. 在您的 CSS 文件中，向第一个网格项目添加显示无。 3. 修改您的 rangeslider js 函数。

//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();
    }
});
于 2019-12-31T10:07:31.647 回答
0

这是一个非常自定义的功能，并且不支持从框中。可能的解决方案 - 额外的网格，在外面构建。 https://jsfiddle.net/IonDen/xnadtv74/

单击此网格可以调用滑块update方法来重新定位句柄。

于 2019-11-07T13:33:25.823 回答