从jQuery ui滑块获取滑块值并将其存储到变量中

时间:2015-09-24 17:17:29

标签: javascript jquery ajax user-interface slider

我正在尝试从此滑块中获取值:

  $(function () {
     $("#slider-range").slider({
        range: true,
        min: 2000,
        max: 8500,
        values: [2000, 8000],
        step: 200,
        slide: function (event, ui) {
            $("#dl-sv-input-mmr").val(ui.values[0] + " - " + ui.values[1]);

        }
     });
      $("#dl-sv-input-mmr").val($("#slider-range").slider("values", 0) +
        " - " + $("#slider-range").slider("values", 1));
   });

如何获取当前值并将其存储到变量中?我试图在AJAX中做一个过滤器,它将获得一定范围内的所有元素。我是一个新手,并不确定这是否是正确的方法。

HTML:

  <label for="dl-sv-input-mmr" class="control-label col-xs-2">MMR:</label>

        <div class="col-xs-4">
            <input type="text" class="form-control" id="dl-sv-input-mmr" name="dl-sv-input-mmr" readonly
                   style="border:0; color:black; font-weight:bold;">

            <div id="slider-range"></div>
        </div>

1 个答案:

答案 0 :(得分:0)

请注意,您需要在html中使用此代码才能使代码正常工作

<div id="slider-range"></div>
<input id="dl-sv-input-mmr" type="text"/>

定义这两个全局变量

var min = 0; 
var max = 0; 

$(function () {
    $("#slider-range").slider({
        range: true,
        min: 2000,
        max: 8500,
        values: [2000, 8000],
        step: 200,
        slide: function (event, ui) {
              $("#dl-sv-input-mmr").val(ui.values[0] + " - " + ui.values[1]);
              min = ui.values[0]; //current min slider value
              console.log("min "+min);
              //You can also do min = $("#slider-range").slider("values", 0);
              max = ui.values[1]; //current max slider value 
              console.log("max "+max);
              //You can also do max = $("#slider-range").slider("values", 1);
        }
     });
    $("#dl-sv-input-mmr").val($("#slider-range").slider("values", 0) +
                          " - " + $("#slider-range").slider("values", 1));
    min = $("#slider-range").slider("values", 0);
    max = $("#slider-range").slider("values", 1);
}); 

另请注意,您必须关闭$(function() {

在幻灯片处理程序中分配maxmin值将确保每次您都有更新的值。

你可以随时做     var min = $(“#slider-range”)。slider(“values”,0);     var max = $(“#slider-range”)。slider(“values”,1);

检查 http://api.jqueryui.com/slider/#method-values

检查您是否正在加载jQuery js文件和jQuery-ui js和css