CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui-slider
John Low
John Low

Reputation: 119

Changing value of slider by clicking on images

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

Upvotes: 0

Views: 769

Answers (4)

Simon
Simon

Reputation: 219

Just add 

$('#slider-value').text(value);

after 

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

The input is hidden, of course you couldn't see it.

Upvotes: -1

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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

Upvotes: 1

GrahamTheDev
GrahamTheDev

Reputation: 24825

Please note the below fiddle to answer - although it fixes your problem - is definately NOT the way to do this.

using an alt to store a value is not correct as alt tags are to help describe what the image is.

Instead look-up data- attributes as this is what they are designed for.

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

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


 $("#slider").slider({'value':val1}); // set the value of the slider
 $( "#slider-value" ).html(  $('#slider').slider('value') ); //update the text
 });

Fiddle Demo

Upvotes: 0

Manwal
Manwal

Reputation: 23816

I am not sure what you want. May be you want to change slider dynamically when click on image. I have added only one line for changing value pragmatically :

$('#slider').slider('value', value);// changing value of slider

Updated DEMO See changing slider value when click on images

Upvotes: 2

Related Questions