CODEWITHSUNDEEP
jquery-uisliderjquery-ui-slider
Ant
Ant

Reputation: 43

jquery-ui slider handle finish position is 100% left - placing it outside the slider

I am using jQuery-ui slider for the first time and am confused by a rather basic issue. When setting my slider, I wish to do so without using a theme. When I slide from left to right, the right hand position of the slider handle steps 1 handle width past the slider. This is due to the slider css positioning the handle with left: 100%. I note many many other people using the slider without any difficulty, but can't see how they are getting round this issue.
Demo of issue
I assume I am missing something embarrassingly basic and would love to know what.
many thanks

Upvotes: 2

Views: 4870

Answers (5)

dBlaze
dBlaze

Reputation: 165

I find css "translate" property the best option here...

.ui-slider-horizontal .ui-slider-handle {
    -webkit-transform: translateX(-2px);
    -moz-transform: translateX(-2px);
    -ms-transform: translateX(-2px);
    transform: translateX(-2px);
}

Adjust translate pixel value to your needs :)

Upvotes: 0

nerdess
nerdess

Reputation: 10920

It also helps to ensure that the values passed to the slider are integer. I had some issues with the pointer of the slider being in the wrong place but when I forced the value to be integer with parseInt() like so:

value: parseInt(whateverValue)

it worked fine.

Upvotes: 0

Will Earp
Will Earp

Reputation: 41

Set a left margin or minus half the width of the handle

Upvotes: 0

Ant
Ant

Reputation: 43

Having read a bit more into this, it seems that the slider is designed to act in the way described, but with the handle offset to the left by 50% of its width. Thus the centre of the bar denotes to value - which makes total sense (when the slider denotes a value).
To use the slider as a scrollbar simply wrap the slider in a div which is padded left and right with 50% of the slider's width. I've updated my demo to reflect this.
If anyone has a better solution, without needing the extra div, I would like to see it.

Upvotes: 2

billygoat
billygoat

Reputation: 21984

I checked your demo. You are missing some css files. DID you also download the css files from jquery ui site. For instance ui-widget-content is the css that specifies the width of the slider bar and its missing in your slider. Get a css and link it to your page and you should be fine.

Upvotes: 0

Related Questions