ion.rangeSlider 将滑块锁定为预定义值

Posted 2023-02-18

【中文标题】ion.rangeSlider 将滑块锁定为预定义值

【英文标题】：ion.rangeSlider lock the slider to predefined values

【发布时间】：2014-06-09 08:05:38

【问题描述】：

是否有将滑块锁定为预定义值的选项？我是说

值：[“7.5”、“15”、“35”、“65”、“99”、“125”、“150”、“199”、“299”、“399”、“499”] ,

现在我只想将“7.5”移动到 15,35.....499，

这怎么可能？因为当我从“7.5”开始滑块时，它会显示 43、79。我不想要这些值，滑块只移动给定的值！可以吗！

    if($('#range_slider_a').length) 
            $("#range_slider_a").ionRangeSlider(
               type: "single",
                step: 10,
               postfix: " $",
               min: 7.5,
               max: 499,
               //from: 7.5,
               hasGrid: true,
            values: ["7.5", "15", "35", "65", "99", "125", "150", "199", "299", "399", "499"], 
              onChange: function(obj) 
                var current_price =     $('#range_slider_a').prop("value");
                $('#contact_limit').empty().append(''+current_price);
                $('#contact_price').empty().append(''+current_price);
                //alert(current_price);

             ,
            );



        

【问题讨论】：

ionden.com/a/plugins/ion.rangeSlider/en.html

【参考方案1】：

也许您使用的是旧版本的 Ion.RangeSlider。在此处查看新版本：https://github.com/IonDen/ion.rangeSlider

试试这个例子来正确设置滑块：

var $range = $(".js-range-slider");

$range.ionRangeSlider(
    type: "single",
    postfix: " $",
    grid: true,
    values: ["7.5", "15", "35", "65", "99", "125", "150", "199", "299", "399", "499"]
);

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css" integrity="sha256-nv5vSBJAzPy+07+FvRvhV2UPpH87H/UnWMrA6nbEg7U=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js" integrity="sha256-eXdxIh/sjKTNi5WyC8cKHekwPywORiomyiMFyZsowWw=" crossorigin="anonymous"></script>

<div class="range-slider">
    <input type="text" class="js-range-slider" value="" />
</div>

【参考方案2】：

您必须将 from 更改为 0。 在您的情况下，from 是 values 数组的索引，因此如果您想从 7.5 开始滑块，您必须为 from 属性设置 0。