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

[dalles]

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

to

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

to

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]

I am having the same problem,

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

<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]

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