How can I destroy or recreate jRange?

[jorkata]

Hi, I need to destroy or recreate successfully jRange element. If I try to recreate over it then keep the previous onstatechange passed handler. Please advice.

Thanks in advance.

[s-severin-frontend]

+1

[liliangali]

+1

[a-v-l]

+1

[ayiis]

+1. I got a same issue

I remove those elements to destory and rebuild the node to create then use 'setValue' to reset it.

Stupid way.

[eLmre]

function clearRange() { jQuery('.JS-Range-Slider').next('div').remove(); jQuery('.JS-Range-Slider').remove(); jQuery('.JS-Range').append('<input type="hidden" class="JS-Range-Slider" value="" />'); setTimeout(initRange, 500); // Run the initialization... setTimeout is needed for older smartphones } window.addEventListener('orientationchange', clearRange);

Sad, but works.

[long65]

RangeChange = function (value) { //TODO }; var valString = self.min.toString() + "," + self.max.toString(); vercutSlider = $(''); vercutSlider.jRange({ from: self.min, to: self.max, step: 1, scale: [self.min, self.max], format: '%s', width: 130, showLabels: true, isRange: true, snap: false, onstatechange: RangeChange }); vercutSlider.jRange('setValue', valString); $("#_div_Slider").append(vercutSlider);

----------------------------destroy--------------------------

$('#_div_Slider .slider-container').off("change", RangeChange); $("#_div_Slider").empty();

If you do not do the "off change", a memory leak will occur.

[summer0101]

I found it only today when I used it. I didn't think the destroy or recreate jRange was as good as updating the values and ranges, so I changed the code and added the 'updateRender' and 'updateScale' methods to update the range and modify the values that were displayed. It is hoped that the users will have this need in the future. Code in jquery.range.js shown below.

updateRender: function(data) {
	return 0 !== this.inputNode.width() || this.options.width ? (this.options.width = this.options.width || this.inputNode.width(), this.domNode.width(this.options.width), this.inputNode.hide(), this.isSingle() && (this.lowPointer.hide(), this.lowLabel.hide()), this.options.showLabels || this.labels.hide(), this.attachEvents(), this.options.showScale && this.updateScale(data), void this.setValue(this.options.value)) : void console.log("jRange : no width found, returning")
		},
updateScale: function(scale, from, to) {
	for(var t = scale || [from, to], i = Math.round(100 / (t.length - 1) * 10) / 10, s = "", o = 0; o < t.length; o++) s += '<span style="left: ' + o * i + '%">' + ("|" != t[o] ? "<ins>" + t[o] + "</ins>" : "") + "</span>";
			this.scale.html(s), $("ins", this.scale).each(function() {
				$(this).css({
					marginLeft: -$(this).outerWidth() / 2
				})
			})
		},

In the demo, if you update the range => $('.range-slider').jRange('updateRange', '0,10'); Then you can call updateScale => $('.range-slider').jRange('updateRender',[0,1,2,3,4,5,6,7,8,9,10]);