Changing value of slider by clicking on images

Question

I want make value of slider change dynamically by clicking on images, example when i click on the first image the value of horizontal slider should be 1, the same think with the second image, my solution was to make an input hidden to save the position of image and put this value (positionimgvalue) in the value of horizontal slider but it doesn't work

this is my code :

HTML CODE :

<h1>Changing value of slider by clicking on images </h1>
<div id="slider"></div>

<p>Your slider has a value of <span id="slider-value"></span></p>
<input type=hidden name=value value="">
 <ul class="teintestyle">
<li>
 <img border="0" src="http://lorempixel.com/100/81/" width="100" height="81" alt="1" />
</li>

<li>
<img border="0" src="http://lorempixel.com/g/400/200" width="100" height="81" alt="2" />
</li>

<li>
<img border="0" src="http://lorempixel.com/400/200/sports" width="100" height="81" alt="3" />
</li>
<li>
<img border="0" src="http://lorempixel.com/400/200/sports/Dummy-Text" width="100" height="81" alt="4" />

</li>
</ul>

JS code :

 $('.teintestyle li').click(function(){

          var value = ( $(this).find('img').attr('alt'));


         $( "input[name='value']" ).val(value);


     });
var positionimgvalue =  $( "input[name='value']" ).val();
$("#slider").slider(
{
            value:positionimgvalue,
            min: 0,
            max: 4,
            step: 1,
            slide: function( event, ui ) {
                $( "#slider-value" ).html( ui.value );
            }
}
);

$( "#slider-value" ).html(  $('#slider').slider('value') );

jsfiddle :

jsfiddle

THANKS FOR HELP

Answer 1

you can use index() for each li instead of getting attr('alt')

 $('.teintestyle li').click(function(i){   
         var value = $(this).index();
         $('#slider-value').text(value);
         $('#slider').slider('value', value);
     });

DEMO