CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
Defyleiti
Defyleiti

Reputation: 555

Slider handle going outside the horizontal slider

I'm trying to make the handle move to where the slider is but it is going outside the slider. Here's a jsfiddle: http://jsfiddle.net/endl3ss/gk7fu/3/

CSS

body {
    text-align: centre;
 }

.ui-slider-handle, .ui-state-hover, .ui-state-default{
    height: 17px !important;
    width: 20px;
    background: none !important;
    border-radius: 0;
    top: 0 !important;  
    border:0 !important;
    outline: 3px solid black !important;
}

.ui-slider-horizontal {
    height: 17px !important;
    width: 200px !important;

}

HTML

<div class="slider"></div>

Upvotes: 1

Views: 527

Answers (1)

andyb
andyb

Reputation: 43823

This behaviour is by design and was raised as defect #4308 (closed bug: wontfix), however a workaround was suggested on jquery-ui slider handle finish position is 100% left - placing it outside the slider which wraps the slider in a padded <div> with the padding being half the handle width. Applying this to your code would be:

HTML

<div class="wrapper">
    <div class="slider"></div>
</div>

CSS

.ui-slider{
    border:none; /* remove border here */
}

.wrapper { /* padded container now has the border */
    width:200px;
    padding:0 10px; /* left+right padding of handle width/2 */
    border:1px solid #000;
}

Updated demo

Upvotes: 2

Related Questions