1

i have a problem with jquery slider value after changing it. I'm just using normal jquery UI (version 1.10.4) and jquery core 1.7.2

First time after refresh i have a value which i want. But after the change i can't get it. And i need that to have a if statemnet which will change a value of the paragraph.

This is a JQuery code: 

$(function() {
  $( "#slider" ).slider({
  range:"min",
  min: 0,
  max: 100,
  value: 10,
  slide: function wynik( event, ui ) {
     $( "#price" ).val("$" + ui.value);
  }
  });
  $( "#price" ).val( "$" + $( "#slider" ).slider( "value") );
    var val = $('#slider').slider("value");
    if ( val >= 20 ) {
       $("#priceText").text("first text");
    } else {
       $("#priceText").text("second text");
    }
});

What is wrong here?

I want to change a text in label: 

<p>
<input type="text" id="price">
<label id="priceText" for="price">Some text to change</label>
</p>

Input working correctly and show the value all the time in right way. But label doesn't change (only first time after refresh).

I have read a lot of posts on SO before i post this one. For example: How to get value from jQuery UI slider? or How to get value from input with dynamically changed value by jquery UI slider? But i can't get it done anyway.

27Zaku
  • 11
  • 1
  • 1
  • 2

2 Answers2

2

Jquery Slider emit a "slidechange" event everytime it change value

Remember, it should be listened on the jQuery element after you've registered the event in the element itself

$( "#slider" ).slider({
    change: function( event, ui ) {
        // register event here
    }
});

$( "#slider" ).on( "slidechange", function( event, ui ) {
    // use ui.value to get the current value
} );

Check the official api wiki for all the slider related events

Official Slider Api

LookForAngular
  • 1,030
  • 8
  • 18
  • Ok. This is helpful but i still don't get it. Instead of value, it still give me only object form and alert not working. `change: function( event, ui ) { $( "#price" ).val(ui.value); }` `$( "#slider" ).on( "slidechange", function( event, ui ) { var val2 = $( "#price" ).val(ui.value); if (val2 > 10) { alert("working"); } else { alert("not working"); } } );` – 27Zaku May 02 '17 at 21:28
  • By using .val(...) you are technically setting a value to the slide, this method do not return anything, so the expression val2 > 10 is always false. Check val2 value, a console log should show that it is undefined – LookForAngular May 03 '17 at 07:19
2

You can try this:

$("#selector").change(function() {
    $("#slider-range").slider('values',0,$(this).val());
});

Working Fiddle

Mayank Pandeyz
  • 25,704
  • 4
  • 40
  • 59