jQuery-UI多范围滑块 - 获取值

时间:2016-04-11 19:37:02

标签: javascript jquery jquery-ui

我正在为我的多范围输入使用this jQuery-UI插件。它很好用,除了一部分,我无法获取它的值。有人用过这个插件吗?如何获取值以在我的程序中使用它们?我似乎无法找到获取数据的方法。没有描述如何操作的文档。

var ranges_array = [
  {
    id: 1,
    startValue: 2000,
    endValue: 8000,
    color: "rgb(27, 64, 194)"
  }
];
//
$(function() {
  $('#budget-range').rangeSlider({
    min: 0,
    max: 10000,
    ranges: ranges_array
  });
});

1 个答案:

答案 0 :(得分:1)

定义rangeSlider时,您可以使用事件上的rangeSlide参数创建可以读取滑块值的ui个事件:

$(document).ready(function() {
  var currentStartValue = '';
  var currentEndValue = '';

  $('#budget-range').rangeSlider({
    min: 0,
    max: 10000,
    ranges: ranges_array,
    rangeSlide: function(event, ui) {
      currentStartValue = ui.range.startValue; // set the current start value of the range
      currentEndValue = ui.range.endValue; // set the current end value of the range
    }
  });

  function logRangeValues() {
    console.log('Start value: ' + currentStartValue);
    console.log('End value: ' + currentEndValue);
  }
});