确定滑块范围的最小值和最大值

时间:2015-03-28 00:13:00

标签: javascript php jquery html ajax

我想获取价格范围的最小值和最大值。

以下是小提琴: http://jsfiddle.net/dhana36/b453V/2/

理想的解决方案是让我有两个输入,一个用于最小值,一个用于最大值。现在只有一个输入可以控制两者。

  <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">

JS

$(function() {
    $('select').change(function(){
     $( "#amount" ).val( $('select').val() + $( "#slider-range" ).slider( "values", 0 ) +
      " - "+ $('select').val() + $( "#slider-range" ).slider( "values", 1 ) );
    })
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( $('select').val() + ui.values[ 0 ] + " - "+ $('select').val() + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( $('select').val() + $( "#slider-range" ).slider( "values", 0 ) +
      " - "+ $('select').val() + $( "#slider-range" ).slider( "values", 1 ) );
  });

1 个答案:

答案 0 :(得分:0)

试试这个:

<input type="text" id="min">
<input type="text" id="max">

的javascript

$(function() {
 $( "#slider-range" ).slider({
  range: true,
  min: 0,
  max: 500,
  values: [ 75, 300 ],
  slide: function( event, ui ) {
      $("#min").val($('select').val() + ui.values[ 0 ]);
      $("#max").val($('select').val() + ui.values[ 1 ]);
  },
  create: function (event, ui){
     $("#min").val($("#slider-range").slider("values")[0]);
     $("#max").val($("#slider-range").slider("values")[1]);
  }
 });    
});