How do I stop the jquery UI slider from sliding beyond the gutter?

More like exactly half its width, so it's not really moving past the end of the slider. When aligning your screenshots correctly, then you'll see the center of the handle is at the end of the slider, just like I expect it to be for a very precise setting. When the left is 0%, and the right is 100%, then the handle has to move past the end a bit to allow for choosing that 100%.

The handle goes exactly its width beyond the gutter More like exactly half its width, so it's not really moving past the end of the slider. When aligning your screenshots correctly, then you'll see the center of the handle is at the end of the slider, just like I expect it to be for a very precise setting. When the left is 0%, and the right is 100%, then the handle has to move past the end a bit to allow for choosing that 100%.

This is the same when enlarging the handle. When in your case the handle moves more than half its width over the right edge, then I assume it extends less than half on the left? When playing with the CSS a bit I get the same effect with huge handles, like: .

Ui-slider-horizontal . Ui-state-default { /** Defaults: margin-left: -0.6em; top: -0.3em; */ width: 69px; height: 140px; margin-left: -39px; top: -68px; } Even better shown using an arrow, a bit of a hack: . Ui-slider-horizontal .

Ui-state-default { width: 40px; margin-left: -20px; top: 15px; background-color: white; background-image: url('

'); background-repeat: no-repeat; border: 0; } However, as for your usage as a scrollbar, see the slider scrollbar demo, which seems to do what you want? Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.

This is exactly what I wanted. Thanks. – Kris Erickson Aug 28 '09 at 21:26.

I would raise this on the jquery ui google group and/or raise a ticket.

Or you can do it with math, like this: slide: function(event, ui) { $(ui. Handle). Html(""+ui.

Value+""); fix_slider(ui. Handle,ui. Value); }, function fix_slider(slider,value){ var $.

Slider_decalatio = 0.35 // for an width of 27px var pos_calc = $. Slider_decalation * value; // y = ax; $(slider). Find('span').

Css("left",pos_calc + "px"); } This can be improoved but it's a quick f.

I had the same problem and my solution is very simple I think. As Dr.Gibbs said draggable slider handle containment is set to 'parent' as default. So you can overcome it by using css... consider handle img is 100px, and containment div is 250px wide.

Than containment div should have width value 250 - 100 = 150px and margin-right:100px to have the maxZoom img to be shown on correct place. Than you have the exact limit for your handle image...

If you add a cap to either end of the slider you can mimic the effect without changing anything about the slider itself. (slider container here) Just add some very basic CSS... . Cap { width: (half the handle width) } .

Ui-slider, .cap. Left, .cap. Right { float: left; } .

Ui-slider { width: (desired total gutter width - handle width); } . Ui-slider-handle { margin-left: -(half the handle width); } ...then style your caps accordingly. For range shading on a single slider, just style the left cap with the range effect instead of the normal gutter.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.