HTML Range input won't fill all the way when step greater than remaining value

Question

i'm having a bit of a problem with HTML Range inputs, i have an input where i'm getting the configs from the BE and i found a weird situation where, if the step value of the input is greater than the remaining value, then the input kinda gets stuck rather than just fill whatever is left.

This only happens when you got somewhat unbalanced inputs for min,max and step

For example

https://jsfiddle.net/jonnyserra/0s1a5oxf/1/

In that example, if you fill out the bar all the way you'll notice that a bit of the bar beneath it is still visible because it didn't push the handle all of the way. Is there some way to get around this issue that you guys would recommend? Ideally i'd like it to just fill out whatever is left if the step value is greater than whatever is remaining until max.

Answer 1

This is because of what you have set as your min, max, and step attributes in your input element:

    <input type="range" min="33062" max="246000" step="10000">

Because you start at 33062 and increment by 10000 each step, you will never fully be able to get to the max of 246000(the closest you can get before you exceed the max attribute you set is 243062, which results in the discrepancy on your slider). So you should instead set the min and max to values divisible by the step value.

Answer 2

The accepted answer is correct in OP's context. But if you have got the range values right and you still see that the range input is not filling all the way, then it may be because of input padding.

If you have applied the input padding then the range slider will not reach the end. So remove the padding on range input:

<input type="range" min="0" max="100" step="10" style="padding:0;">

Demo