Javascript/Jquery slider change function

Question

Ok so here's the problem. I suck at jquery but I'm trying to get better. I have a jquery ui range slider, works well. But I'm trying to add a change function so that when the values are changed, it puts the min age value into one text box, and the max age into another. Everything above the "change" block works fine, But as soon as i add the block from "change :" downwards to the code, slider fails to appear and I have an obvious error. I've tried this 20 different ways based on online tutorials and I just can't figure out why it's not working.

 $( "#slider-range" ).slider({
      range: true,
      min: 18,
      max: 90,
      
      values: [ <?php echo htmlentities($row_loggedinUser['minAge']) ?>,<?php echo htmlentities($row_loggedinUser['maxAge']) ?> ],
      slide: function( event, ui ) {$( "#amount" ).val(  ui.values[ 0 ] + " - " + ui.values[ 1 ] );}}),
      
      change: function(event, ui){
            var x = document.getElementById('minAgeAmt');
            x.value = $( "#slider-range" ).slider( "values", 0 );
            var y = document.getElementById('maxAgeAmt');
            y.value = $( "#slider-range" ).slider( "values", 1 );  
      };

********* EDIT ***********

Now thanks to Leighton it's working, just one issue . I now have this :

$( "#slider-range" ).slider({
range: true,

min: 18,
max: 90,
values: [ <?php echo htmlentities($row_loggedinUser['minAge']) ?>,<?php echo htmlentities($row_loggedinUser['maxAge']) ?> ],
slide: function( event, ui ) {$( "#amount" ).val("Age Range : " + ui.values[ 0 ] + " - " + ui.values[ 1 ]);},
change: function(event, ui) {
    var x = document.getElementById('minAgeAmt');
    x.value = $( "#slider-range" ).slider( "values", 0 );
    var y = document.getElementById('maxAgeAmt');
    y.value = $( "#slider-range" ).slider( "values", 1 );

}

});

Which works nice, but the bit where the #amount element is given a value only fires (obviously) when a change is made. How can I get it to also fire initially on page load? At the moment when the page loads it looks like this :

and as soon as I change the slider, :

I simply want the same caption generated on page load based on initial values

Did you look at the console to see if there were errors?

nonzaprej
– nonzaprej

2017-05-05 12:37:30 +00:00
Commented May 5, 2017 at 12:37 — nonzaprej
– nonzaprej, Commented May 5, 2017 at 12:37

Leighton · Accepted Answer · 2017-05-06 23:47:37Z

1

Try this:

$( "#slider-range" ).slider({
    range: true,
    min: 18,
    max: 90,

    values: [ <?php echo htmlentities($row_loggedinUser['minAge']) ?>,<?php echo htmlentities($row_loggedinUser['maxAge']) ?> ],
    slide: function( event, ui ) {
        $( "#amount" ).val(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
    },

    change: function(event, ui) {
        var x = document.getElementById('minAgeAmt');
        x.value = $( "#slider-range" ).slider( "values", 0 );
        var y = document.getElementById('maxAgeAmt');
        y.value = $( "#slider-range" ).slider( "values", 1 );  
    }
});

Part 2

For setting the 'amount' value, under the code above you could try:

// This gets the current values which you have set above
var values = $( "#slider-range" ).slider( "option", "values" );
$("#amount").val(values[0] + " - " + values[1]);

Refer https://api.jqueryui.com/slider/#option-values

edited May 6, 2017 at 23:47

answered May 5, 2017 at 12:48

Leighton

263 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rocks Over a year ago

an add on query for you Leighton if you don't mind, inserted into the question above...

Kuru · Accepted Answer · 2017-05-05 12:40:58Z

0

Syntax error, you missed the ) in the last line
Updated coding

$( "#slider-range" ).slider({
      range: true,
      min: 18,
      max: 90,

      values: [ <?php echo htmlentities($row_loggedinUser['minAge']) ?>,<?php echo htmlentities($row_loggedinUser['maxAge']) ?> ],
      slide: function( event, ui ) {$( "#amount" ).val(  ui.values[ 0 ] + " - " + ui.values[ 1 ] );},

      change: function(event, ui){
            var x = document.getElementById('minAgeAmt');
            x.value = $( "#slider-range" ).slider( "values", 0 );
            var y = document.getElementById('maxAgeAmt');
            y.value = $( "#slider-range" ).slider( "values", 1 );  
      }
});

edited May 5, 2017 at 12:40

answered May 5, 2017 at 12:36

Kuru

7385 silver badges18 bronze badges

2 Comments

Jonas Grumann Over a year ago

That's what I saw, too, but in your proposed solution you're closing the change function but not the slider function so it will still throw an error.

Rocks Over a year ago

sorry guys, I do in fact have all of those extra ) and }, I just didn't include them when I cut and pasted

Curiousdev · Accepted Answer · 2017-05-05 12:42:04Z

There is some syntax errors please find below snippet for more info you have to put change function just before slider function is closed

$("#slider-range").slider({
    range: true,
    min: 18,
    max: 90,

    values: [],
    slide: function(event, ui) {
        $("#amount").val(ui.values[0] + " - " + ui.values[1]);
    },
    change: function(event, ui) {
        var x = document.getElementById('minAgeAmt');
        x.value = $("#slider-range").slider("values", 0);
        var y = document.getElementById('maxAgeAmt');
        y.value = $("#slider-range").slider("values", 1);
    } //close change function
}); //close Slider Function

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider-range"></div>

Dhaval Pankhaniya · Accepted Answer · 2017-05-05 12:47:37Z

0

use following

For min value

var min = $("#slider-range").slider("option", "min");

For max value

var max = $("#slider-range").slider("option", "max");

answered May 5, 2017 at 12:47

Dhaval Pankhaniya

1,9961 gold badge16 silver badges29 bronze badges

Collectives™ on Stack Overflow

Javascript/Jquery slider change function

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related