Radio Knob Slider (jQuery)

Question

I am creating a web app that allows stations to be tuned into by turning a knob, However I am unsure on how to do it, I know the onClick and that type of function, but how do I move the image around from 90 to 180 degrees without making more than one image, and store its location based on when they let go.

For example, say we have 88.0 to 108.9.

I would like each time that turn to go up by 1, so 88.0 becomes 88.1 etc.

Answer 1

Working demo : with one tick here: http://jsfiddle.net/WwkB8/4/ (You will see the difference) -- (with 2 ticks) http://jsfiddle.net/WwkB8/2/

This will help: If you have any code flick it across else see the code below and working demo link above. It goes from 88.0 to 108.9! (goes .1 at a time so 88.0 to 88.1)

jQuery code

$(document).ready(function() {
    $("#slider").slider({
        min: 88.0,
        max: 109.0,
        step: .1,
        values: [88.0], // In case of 2 tick slider values: [88.0, another value] 
        slide: function(event, ui) {
            for (var i = 0; i < ui.values.length; ++i) {
                $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
            }
        }
    });

    $("input.sliderValue").change(function() {
        var $this = $(this);
        $("#slider").slider("values", $this.data("index"), $this.val());
    });
});​

HTML

<form>
    <div>
        <input type="text" class="sliderValue" data-index="0" value="88.0" />
        <input type="text" class="sliderValue" data-index="1" value="108.9" />
    </div>
    <br />
    <div id="slider"></div>
</form>