views:

1483

answers:

3

I was trying out jQuery Slider and used an example to play around.

EDIT: I would like to have the slider show the values, like a ruler, to increase usability. As it is now, I am finding it difficult to pass the usability testing. People complain that they want to know what value they are picking before they start sliding.

Any ideas how I can achieve this ? As far as I searched, I could not find out about whether this feature already exists or about how to do this.

<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"&gt;&lt;/script&gt;
<style type="text/css">
    #slider { margin: 10px; }
</style>
<script type="text/javascript">
    $(function() {
     $("#slider").slider({   
      value: 50,
      min: 0,
      max: 99,
      step: 1,
      slide: function(event, ui) {
       $("#amount").val('$' + ui.value);
      }
     });
     $("#amount").val('$' + $("#slider").slider("value"));
    });
</script>
</head>
<body style="font-size:62.5%;">
<div id="slider"></div>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</body>
</html>
+1  A: 

I found an example of a custom JQuery UI Slider that displays hash markings.

jQuery UI Slider from a Select Element

This should give you a good starting point. Let me know if you need help.

bchang
A: 

I've been keeping the input in synch with the slider like so

<div id='support_slider' class='slider' alt='" + pct + "'></div>
<input id='support_input' class='input' alt='" + pct + "' value='" + pct + "' size='1'/>

$("#support_slider").slider({
 //animate: true,
 min: 0,
 max: 10,
 value: pct,
 slide: function(event, ui) {
         set_sliders_and_input($(this), $(this).next(), $(this).next().attr("value"), ui.value);
 }
});

$("#support_input").keyup(function(event) {
 set_sliders_and_input($(this).prev(), $(this), $(this).attr("alt"), $(this).attr("value"));
});

function set_sliders_and_input(slider, input, oldv, newv) {
 if ( newv < 0 || newv > 100 ) return false;
 var diff = oldv - newv;
 input.attr("value", newv).attr("alt", newv);
 slider.slider('option', 'value', newv);
 GM_setValue('support_pct', newv);
 return true;
}
A: 

This should help, he shows the values alongside the handle. pretty neat!:

http://www.keepthewebweird.com/creating-a-nice-slider-with-jquery-ui/

Watch the tutorial!! the demo is a bit off for some reason.