创建动态范围滑块

时间:2013-08-28 16:58:41

标签: javascript jquery html css

我需要一些帮助来创建这个动态范围滑块,因为我不太擅长后端编码。

http://i255.photobucket.com/albums/hh140/testament1234/dynamicrangeslider_zpsb2ae70b4.jpg

基本上,此处的目标是,如果用户选中90比索及以上或90比索至1000比索的选项,滑块将更改最小和最大范围。

这是我的开始。

使用Javascript / Jquery的

<script>
jQuery(function() {
jQuery( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 500,
    step:5,
    values: [ 0, 300 ],
    slide: function( event, ui ) {
        jQuery( "#amount" ).val( "Php" + ui.values[ 0 ] + " - Php" + ui.values[ 1 ] );
    }

});
    jQuery( "#amount" ).val( "Php" + $( "#slider-range" ).slider( "values", 0 ) +
    " - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>

我需要做的就是知道要替换什么或添加什么。

1 个答案:

答案 0 :(得分:0)

您只需将这些变量传递给:

var minimumValue = 0; // Get the minimum pesos somehow
var maximumValue = 1000; // Get the maximum pesos somehow

...
range: true,
min: minimumValue,
max: maximumValue,
...

如果没有更多代码,很难知道还有什么比这更好。 (你从哪里得到这些值,ids等)。