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

Already on GitHub? Sign in to your account

Slider not rendered correctly when using values other than 0 & 100 for min & max. #438

dalles opened this Issue Nov 4, 2012 · 2 comments


None yet
3 participants

dalles commented Nov 4, 2012

Using the following sample HTML

<p id="mysliderValue">10</p>
<input id="myslider" type="range" min="10.0" max="37.0" step="0.5" style="width:100%" onchange="document.getElementById('myslider2Value').innerHTML= this.value;"/>

I notice a dead space at the beginning and end of the bbUI.js rendered slider. After a little digging into the code I made the following changes and it appears to now correctly handle the above min and max values.

I change the following line:

percent = this.outerElement.value/(parseInt(this.outerElement.maxValue) + parseInt(this.outerElement.minValue));


percent = (this.outerElement.value - this.outerElement.minValue)/(this.outerElement.maxValue - this.outerElement.minValue);

and also changed the line:

newValue = Math.ceil((parseInt(this.minValue) + parseInt(this.maxValue))*percent);


newValue = (percent * (this.maxValue - this.minValue)) + this.minValue;

It may still require some further testing and tweaking but has solved the issue I was experiencing.

sh2sg commented Mar 4, 2013

I am having the same problem,

    <input id="myslider2" type="range" min="0" max="100" value="0" step="20" style="width:100%" onchange="document.getElementById('sliderValue').innerHTML = this.value;"/>

<div id="sliderValue"></div>

If I move the selector step by step, I am not able to get min (0) and max (100) printed although the selector is already at the beginning or end of slider bar. The min and max value I can get are 20 and 80.

If I very quickly move the selector, like swiping it from left to right or right to left, I may have a chance to get 0 or 100.

The code modified by @dalles are not really working, depending on what min/max/step values are used, it could be slightly better or worse.

Tested on Ripple.


tneil commented Mar 4, 2013

Thanks for the added info... I still need to get around to looking at this bug

@tneil tneil closed this Jul 17, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment