search

andreruffert / rangeslider.js

🎚 HTML5 input range slider element jQuery polyfill
https://rangeslider.js.org
MIT License
2.16k stars 401 forks source link

Position when body != window #78

Closed matthornsby closed 9 years ago

matthornsby commented 9 years ago

It may have been a poor choice when I elected to give my body a width less than that of the window, but Its too late to turn back now.

It seems that range slider is calculating mouse position relative to the window but is positioning the handle relative to the body, meaning whenever my window is wider than 1190 in this case, the output value (and handle placement) are off by the difference between my body element edge and the wind edge.

I tried changing this.$window = $(window); to this.$window = $("body"); - but no luck there.

Any guesses?

andreruffert commented 9 years ago

@matthornsby a simple example on codepen etc. would be helpful.

matthornsby commented 9 years ago

http://codepen.io/anon/pen/JmklF

I solved my problem by setting the body to "position: static" before the script runs on this page, but keep it "position: relative" globally to solve some issues elsewhere.

I wonder if it may be safer for your script to calculate everything based on the .rangeslider div rather than the window.

Thanks for the script and the response, btw

andreruffert commented 9 years ago

@matthornsby alrighty you should check pr #83 which should fix this issue. Another fix would be to simply use a wrapper element e.g div.wrapper http://codepen.io/anon/pen/cqGpd

Anyway it's now possible to set the body position to relative. The fix will be in the next release.

matthornsby commented 9 years ago

I ran into some troubles getting a secondary gauge below the slider to work responsively because of the padding added by the grabX dimension. In my copy I forced that variable to 0 and put negative margin on the handle so that the slider could be fully percentage based and work better with my gauge. A few screenshots below. I'll try to remember to share a link once its public.

screen shot 2014-08-08 at 10 20 07 am

screen shot 2014-08-08 at 10 20 34 am

screen shot 2014-08-08 at 10 20 47 am

matthornsby commented 9 years ago

The page I used it on just launched yesterday.

andreruffert commented 9 years ago

Kick ass! :stuck_out_tongue_winking_eye: Thanks for sharing! It's pretty cool to see other projects where rangeslider.js is in use. :v:

sgolousov commented 9 years ago

Hello I have tried to create a rangeslider with your rangeslider.js. I have created input type range with min:0.02, max:2, step 0.01. At the point 1.64 the callback function "onSlide(position,value)" gives value equal 1.6400000000000001.

I assume that this is common JS floating problem: In function Plugin.prototype.setPosition you have value calculation value = (this.getValueFromPosition(this.cap(pos, 0, this.maxHandleX)) / this.step) * this.step; The last operation is multiplying by this.step, which could be float. Here comes floating problem.

Just inform you=)