Question

我在我的表单中使用Powerange库。它是一个用于创建iOS样式范围栏的javascript库。作者提供了很多选项。

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

Answer 1

我遇到了同样的问题，并编写了一些代码，通过javascript以编程方式将滑块移动到特定值。见下文。

/**
 * 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);

Answer 2

阅读源代码......

/**
 * Set slider current value.
 *
 * @param {Number} offset
 * @param {Number} size
 * @api private
 */

Powerange.prototype.setValue = function (offset, size) {
  var part = percentage.from(parseFloat(offset), size)
    , value = percentage.of(part, this.options.max - this.options.min) + this.options.min
    , changed = false;

  value = (this.options.decimal) ? (Math.round(value * 100) / 100) : Math.round(value);
  changed = (this.element.value != value) ? true : false;

  this.element.value = value;
  this.options.callback();
  if (changed) this.changeEvent();
};

所以 - 基于示例

var elem = document.querySelector('.js-range');
var init = new Powerange(elem);

我想

init.setValue(?, ?)

会这么做......不确定参数......我认为它们是（value，maxValue） - 因为使用offset，size来计算该函数的百分比...试试看看

Answer 3

init.options.max = 100;
init.options.min = 1;

Powerange - 通过javascript更改值

3 个答案: