jQuery UI滑块固定值

前端之家收集整理的这篇文章主要介绍了jQuery UI滑块固定值前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图让jQuery滑块设置值滑动,而不是最小&最大金额

我想要“0,25,50,100,250,500”作为唯一的数量,人们可以滑动,但无法解决如何完成。把它们放在“价值”部分似乎什么都不做。

<script type="text/javascript">
$(function() {
    $("#slider-range").slider({
        range: true,min: 0,max: 500,values: [100,250],slide: function(event,ui) {
            $("#amount").val('Miles: ' + ui.values[0] + ' - ' + ui.values[1]);
        }
    });
    $("#amount").val('Miles: ' + $("#slider-range").slider("values",0) + ' - ' + $("#slider-range").slider("values",1));
});
</script>

解决方法

值初始化器用于提供多个拇指滑块的起始位置。

我将提供一个可能值的数组,将滑块更改为在该数组的范围内映射,然后将您的演示文稿位更改为从相应的数组元素中读取。

范围滑块:多拇指版本

$(function() {
    var valMap = [0,25,50,100,250,500];
    $("#slider-range").slider({
        min: 0,max: valMap.length - 1,values: [0,1],ui) {                        
            $("#amount").val('Miles: ' + valMap[ui.values[0]] + ' - ' + valMap[ui.values[1]]);                
        }       
    });
    $("#amount").val('Miles: ' + valMap[$("#slider-range").slider("values",0)] + ' - ' + valMap[$("#slider-range").slider("values",1)]);
});

范围滑块:单拇指版本

$(function() {
    var valMap = [0,40,63,90,110,125,140,160,225,250];
    $("#slider-range").slider({
        min: 1,value: 0,ui) {                        
            $("#amount").val(valMap[ui.value]);                
        }       
    });
    //$("#amount").val(valMap[ui.value]);
})

;

最小html:

<input type="text" id="amount" value="40" />
<div id="slider-range"></div>
原文链接:https://www.f2er.com/jquery/181776.html

猜你在找的jQuery相关文章