Comments (6)
It seems that it's not just the demo, your calculations are slightly wrong, depending on the min
and max
value, some values can't be set. For example if I on the input element have values min=1
max=50
I can't set value 20
on that element, it jumps on 21.
if min=1
and max=100
then I can't set the slider to value 21
it jumps to 22
It appears that your calculation doesn't properly accounts for the min
value.
from rangeslider.js.
First of all, thanks for this plugin. But I'm having this issue as well. I have + and - buttons that move the slider incrementally.When hitting the - button to decrease the value, it gets hung up at certain points. When I hit the + button to increase the value, it skips some numbers. My slider from 0 to 243 gets hung up around the following numbers 14, 27, 53, 62, 104, 106, 123, 206, 208, 210
from rangeslider.js.
I ran into this issue as well. I modified Plugin.prototype.getValueFromPosition
function (~ line 252) by removing the call to Math.ceil()
.
//Original Code
value = this.step * Math.ceil((((percentage) * (this.max - this.min)) + this.min) / this.step);
//Modified Code
value = this.step * ((((percentage) * (this.max - this.min)) + this.min) / this.step);
In some cases a number just larger than the desired position was being computed and ceiling was doing what it does best and rounding to that larger number. Mine also hung up and I believe it was due to a feedback loop in value setting. My input was setting the slider and the slider was setting the input, thus giving the impression of being 'stuck'. This solution is working great for me!
from rangeslider.js.
Great find, pilcherb. I implemented your code into my local copy and it worked great. Didn't get suck at all. There was one thing still happening though.
As I move the slider, I have a number input field that displays the slider value. if I removed Math.ceil()
it displayed decimal numbers as I drag the slider, instead of adhering to my step value of 1. But as soon as I released the mouse, it rounded the displayed number to a whole number, properly adhering to my step value.
Thanks to you finding the code that controls the value, I was able to experiment more. Instead of removing Math.ceil()
, I replaced it with Math.round()
and it seemed to fix both problems. The slider wouldn't get stuck or skip and the input would only display whole numbers as I drag the slider. I also experimented with changing my step value to 0.25 and it still always displayed the proper step value as the slider was moved. I have only tested this in Chrome.
// new proposed code
value = this.step * Math.round((((percentage) * (this.max - this.min)) + this.min) / this.step);
from rangeslider.js.
Excellent change, I'm glad this worked for you as well!
from rangeslider.js.
#95 should fix this issue. It will be in the next release (0.3.5).
from rangeslider.js.
Related Issues (20)
- Slider position doesn't automatically update when max is programmatically set to a lesser value HOT 4
- Negative step HOT 2
- if max value is large like 25000 . slider does not step 1 by 1
- programmatic value changes input null HOT 2
- Color Range Slider
- Slider UI issue with Kendo Extend
- Pause issue
- Not changing Slider on "keyup"!!! HOT 2
- onSlideEnd not fired when using keyboard
- how to configure webpack to use it HOT 1
- Disable single step and show as disabled HOT 3
- 📣 Please use Discussions for Q&A and feature requests
- Custom step size averaged out across the slider? HOT 1
- Stopped working with cdn
- rangeSlider initialize issue
- Programmatic attribute changes do not reset the initial value
- @change event is not firing in vue 3 with rangeslider. How to fix it ?
- 👀 Consider using <range-slider> element instead of rangeslider.js
- feature request: multitouch HOT 1
- Issue when the rangeslider(v2.3.0) is hidden and resized
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rangeslider.js.