5

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"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
<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>

3 Answers 3

5

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.

0

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;
}
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.