Search code examples
jqueryjquery-uislideruislider

Additional textbox that changes depending on Jquery UI Slider value

I have a jquery UI Slider that goes from 0 to 100 and default start is 50. I was wondering how I create have an additional simple text box that prints one of 3 different options depending on the user's value from the Slider. Basically, if the range is anywhere from 0-33, the textbox would read (Easy), if it ranges from 34-66 it would read (average) and 67-100 would read (Hard).

This is currently my code: 

<script> 
$( ".slider3" ).slider({
animate: true,
range: "min",
value: 50,
min: 0,
max: 100,
step: 1,

//this gets a live reading of the value and prints it on the page
slide: function( event, ui ) {
$( "#slider-result3" ).html( ui.value );
},

});
</script>

Please help as I've been trying to figure this out for hours.

Solution

  • You just need to do an if on the ui.value in the slide method:

    if (ui.value <= 33)
    $( "#slider-input3" ).val( "easy" );
else if (ui.value <= 66)
    $( "#slider-input3" ).val( "average" );
else
    $( "#slider-input3" ).val( "hard" );

    See this jsfiddle for an example.