jquery - Powerange - Change value via javascript -
i using powerange library in form . javascript library create ios style range bars. there plenty of options author has provided.
is there way move slider particular value via javascript programmatically? documentation doesn't has related this.
i have same problem , write code move slider particular value via javascript programmatically. see below.
/** * 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 less slider min value or greater 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(); }
you can use standalone this:
var elem = document.queryselector('.js-decimal'); var init = new powerange(elem, options); setslidervalue(init, 36);
also can update powerange.prototype. input code bellow on line 1457 in powerange.js
/** * set slider new value. * * @param {number} newvalue */ powerange.prototype.setslidervalue = function (newvalue) { console.assert( (newvalue > this.options.min && newvalue < this.options.max), 'new value less slider min value or greater 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(); };
now can use in way:
var elem = document.queryselector('.js-decimal'); var init = new powerange(elem, options); init.setslidervalue(36);
Comments
Post a Comment