javascript - How to make a jQuery slider that will act like a volme control in a television -

i have design jquery slider act volume control , change color while grow higher value.i able design problem slider changing manually want supply value on basis of value slider shrink or grow . here jsfiddle demo upto have got.

http://jsfiddle.net/lotusgodkk/gcu2d/133/

$(document).ready(function () { $('.checked').slider({  }); }); 

i want slider changed upon input

demo

html

<section>   <span class="tooltip"></span>      <!-- tooltip -->     <div id="slider"></div>     <!-- slider --> <span class="volume"></span>      <!-- volume --> </section> 

jquery

$(function () {      //store elements in variables     var slider = $('#slider'),         tooltip = $('.tooltip');      //hide tooltip @ first     tooltip.hide();      //call slider     slider.slider({         //config         range: "min",         min: 1,         value: 1,          start: function (event, ui) {             tooltip.fadein('fast');         },          change: function (event, ui) {             var value = slider.slider('value');             setvolumeimage(value);         },          //slider event         slide: function (event, ui) { //when slider sliding              var value = slider.slider('value');             setvolumeimage(value);             tooltip.css('left', value).text(ui.value); //adjust tooltip accordingly         },          stop: function (event, ui) {             tooltip.fadeout('fast');         }     });       function setvolumeimage(value) {         volume = $('.volume');         if (value <= 5) {             volume.css('background-position', '0 0');             $(".ui-slider-range.ui-widget-header.ui-slider-range-min").css('background', 'green');         } else if (value <= 25) {             volume.css('background-position', '0 -25px');             $(".ui-slider-range.ui-widget-header.ui-slider-range-min").css('background', 'yellow');         } else if (value <= 75) {             volume.css('background-position', '0 -50px');             $(".ui-slider-range.ui-widget-header.ui-slider-range-min").css('background', 'orange');         } else {             volume.css('background-position', '0 -75px');             $(".ui-slider-range.ui-widget-header.ui-slider-range-min").css('background', 'red');         }     } });