jQuery UI - slider + progressbar effect

Question

I'm looking to build a control that's a combination of the jquery ui progressbar and slider. What I really need is exactly like the range slider, except that the max shouldn't have a handle and shouldn't be movable by the user. I want to implement something like a buffered playback control, where the 'fill' is the max amount buffered and the slider handle shows the current position.

Before I go mess with the slider code to do this, I was wondering if anyone had suggestions on how I could implement this without any custom changes. One idea that comes to mind, but I don't know how to implement, is to superimpose a range with fixed minimum slider (and hidden handle) on top of a regular slider. I can put these side-by-size or above/below but I don't know HTML/CSS well enough to pull off the 'superimpose' effect. Any ideas on how to do this would help too.

Thanks!

Answer 1

I've prepared a small patch to the slider widget for constraints. Here's a demo of the behavior I believe you're looking for:

http://devsandbox.nfshost.com/js/jquery-ui/development-bundle/demos/slider/constraints.html

Here's the patched file:

http://devsandbox.nfshost.com/js/jquery-ui/development-bundle/ui/ui.slider.js

Answer 2

hey i am trying to get the value of slider when clicked using

$('#slider-constraints').slider({ change: function(event,ui){ alert(ui.value); } });

but not getting it :(