Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

updateRange was insufficient, added an updateScale #64

Open
samcov opened this issue Apr 6, 2017 · 2 comments
Open

updateRange was insufficient, added an updateScale #64

samcov opened this issue Apr 6, 2017 · 2 comments

Comments

@samcov
Copy link

samcov commented Apr 6, 2017

In the demo, if you update the range => $('.range-slider').jRange('updateRange', '0,200');
Then you can call updateScale => $('.range-slider').jRange('updateScale',[0,50,100,150,200]);
Code in jquery.range.js shown below.

updateScale: function(scale, from, to) {
var s = scale || [from, to];
var prc = Math.round((100 / (s.length - 1)) * 10) / 10;
var str = '';
for (var i = 0; i < s.length; i++) {
str += '' + (s[i] != '|' ? '' + s[i] + '' : '') + '';
}
this.scale.html(str);

$('ins', this.scale).each(function() {
	$(this).css({
		marginLeft: -$(this).outerWidth() / 2
	});
});

},

@nitinhayaran
Copy link
Owner

thanks for the update, @samcov could you please send a Pull Request for the same

@summer0101
Copy link

summer0101 commented Jun 25, 2018

Hello, I found it only today when I used it. The value was updated but the style was not modified. I tried to modify the style.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]);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants