How do I stop the jquery UI slider from sliding beyond the container

Question

I am using jQuery UI horizontal slider. I need the position of the handle to be always within the slider. If I set the margin-left to minus of handle's width, the right position is within the container but the left position moves out of the container. I want to achieve this with CSS only. I don't want to add any wrapper div.
The following is the HTML code:

<div id="slider"></div>
<ul id="box">
  <li>Fade with the above slider...</li>
  <li>Fade with the above slider...</li>
</ul>

The CSS is as follows:

#box {
  width: 200px;
  height: 200px;
  background-color: #ff0000;
}

#slider {
  width: 200px;
}

.ui-slider .ui-slider-handle {
  width: 20px;
  margin-left: -10px;
}

Finally, the js code:

$(document).ready(function() {
 $('#slider').slider({
   min: 0,
   max: 1,
   step: 0.1,
   value: 1
 })
 .bind("slide", function() {
   //get the value of the slider with this call
   var o = $(this).slider('value');
   $(e).css('opacity', o)
 });
});

Any help will be appreciated.

Could you please show us some existing code, so we can see what you're trying to do (and more clearly evaluate the issue)? — mech, Feb 18 '16 at 07:35
It really isn't. Without some sample code, I can't tell if they're making a crucial mistake somewhere. jquery sliders are very easy to use, and shouldn't cause the issue they're experiencing. I'd rather not troubleshoot blindly. — mech, Feb 18 '16 at 07:44
@mech, [see](https://jqueryui.com/slider/), there is slider itself and handle inside of it. Handle is positioned by its center. So when the value is zero, the left half of slider is outside of the bar. The same thing with right half in case of 100%. It's by design. He wants to change this behaviour in such vay, that for 0 left size of the handle touches left side of the bar and same with right side for 100%. — Qwertiy, Feb 18 '16 at 07:49

Qwertiy · Answer 1 · 2016-02-18T07:54:31.387

1

First of all, the better way would be not to change this. Just shrink your slider a bit so as it fits into the area with handle.

Anyway, if you wish to stop markes at 0 and 100% by corresponding side instead of its center, you can do it such way:

.ui-slider-handle[style*="left: 0"] {
  margin-left: -1px;
}

.ui-slider-handle[style*="left: 100"] {
  margin-left: -1.2em;
}

edited Feb 18 '16 at 07:54

answered Feb 18 '16 at 07:45

Qwertiy

19,681
15
61
128

Thanks @Qwertiy for the answer, I tried it, it works. But if I do this then the position of the handle at last and second last position will be same only the value returned by jQuery will be different. I want the maximum value when the handle's right border co-incides with the right border of the slider. Till handle reaches that position value should be lesser than the maximum. – Mumzee Feb 18 '16 at 09:22
@Mumzee, it depends on the values. If you were using descrete values, you won't have this problems. – Qwertiy Feb 18 '16 at 09:56

score 1 · Accepted Answer · answered Feb 18 '16 at 09:53

$("div").slider();

section {
  margin: 1em;
  border: 1px dotted red;
}

h1 {
  margin: 0;
}

div {
  margin: .3em .6em;
}

.new .ui-slider:before {
  content: "";
  background: inherit;
  border: inherit;
  border-radius: inherit;
  position: absolute;
  left: -.6em; /* Half of the handle width */
  top: -1px; /* Width of the border */
  right: -.6em;
  bottom: -1px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<section>
  <h1>Default</h1>
  <div></div>
</section>

<section class="new">
  <h1>Modified</h1>
  <div></div>
</section>

How do I stop the jquery UI slider from sliding beyond the container

2 Answers2