javascript - Powerange - 通过 javascript 更改值

Question

我正在使用Powerange图书馆以我的形式。它是一个用于创建 iOS 样式范围栏的 javascript 库。作者提供了很多选项。

有没有办法通过 JavaScript 以编程方式将 slider 移动到特定值？文档没有任何与此相关的内容。

Answer 1

我有同样的问题，并编写了一些代码以通过 JavaScript 以编程方式将 slider 移动到特定值。请参阅下面。

/**
 * set slider new value
 * 
 * @param {object} sliderInstance 
 * @param {number} newValue       
 */

function setSliderValue (sliderInstance, newValue) {
  console.assert( (newValue > sliderInstance.options.min && newValue < sliderInstance.options.max), 
    'New value is less then slider min value or greater then slider max value!');
  var changed = false;
  var offset;
  var maxValue = sliderInstance.options.max;
  var minValue = sliderInstance.options.min;
  var stepIndex;
  var stepsArr = (sliderInstance.options.step) ? sliderInstance.steps : null;
  var value = (sliderInstance.options.decimal) ? (Math.round(newValue * 100) / 100) : Math.round(newValue);

  if (!sliderInstance.options.step) {

    var persentNewValueOfVal = (newValue - minValue) * 100 / (maxValue - minValue);
    offset = (sliderInstance.slider.offsetWidth - sliderInstance.handle.offsetWidth) * persentNewValueOfVal / 100;

  } else {

    stepIndex = ( (value - minValue)/sliderInstance.options.step ).toFixed(0);
    offset = stepsArr[+stepIndex];

  }

  changed = (sliderInstance.element.value != value) ? true : false;
  sliderInstance.setPosition(offset);
  sliderInstance.element.value = value;
  sliderInstance.options.callback();
  if (changed) sliderInstance.changeEvent();
}

您可以像这样独立使用它:

var elem = document.querySelector('.js-decimal');
var init = new Powerange(elem, options);

setSliderValue(init, 36);

您还可以更新 Powerange.prototype。我在 powerange.js 的第 1457 行输入了以下代码

/**
 * Set slider new value.
 * 
 * @param {number} newValue 
 */

Powerange.prototype.setSliderValue = function (newValue) {
  console.assert( (newValue > this.options.min && newValue < this.options.max), 
    'New value is less then slider min value or greater then slider max value!');
  var changed = false;
  var offset;
  var maxValue = this.options.max;
  var minValue = this.options.min;
  var stepIndex;
  var stepsArr = (this.options.step) ? this.steps : null;
  var value = (this.options.decimal) ? (Math.round(newValue * 100) / 100) : Math.round(newValue);

  if (!this.options.step) {

    var persentOfVal = percentage.from( (newValue - minValue), (maxValue - minValue) );
    offset = percentage.of( (this.slider.offsetWidth - this.handle.offsetWidth), persentOfVal );

  } else {

    stepIndex = ( (value - minValue)/this.options.step ).toFixed(0);
    offset = stepsArr[+stepIndex];

  }

  changed = (this.element.value != value) ? true : false;
  this.setPosition(offset);
  this.element.value = value;
  this.options.callback();
  if (changed) this.changeEvent();
};

现在您可以以某种方式使用它:

var elem = document.querySelector('.js-decimal');
var init = new Powerange(elem, options);

init.setSliderValue(36);