Loading Value of Input into Slider Options

Question

I need the variable "value" in my slider plugin to be the integer value of a input in the form:

$(function () {
  $("#calcSlider").slider({ 
    min: 0,
    max: 90,
    step: 5,
    value: /* ACCESS HERE!!!!!! */,
    slide: function (event, ui) {
      $("#calcSup").val(ui.value);
    }
  });
});

I need value: to be the value in calcSup or ${form.calcSup}, but that is a string. I need it parsed to a int:

<input type="text" 
       id="calcSup" 
       name="calcSup" 
       value="${form.calcSup}" 
       size="3" 
       readonly="readonly" />

possible duplicate of [How do I Convert a String into an Integer in JavaScript?](http://stackoverflow.com/questions/1133770/how-do-i-convert-a-string-into-an-integer-in-javascript). — Felix Kling, May 10 '12 at 20:23

score 2 · Accepted Answer · answered May 10 '12 at 19:51

2

Maybe you are looking for the parseInt function, more details can be found here:

http://www.w3schools.com/jsref/jsref_parseint.asp

$(function () {
$("#calcSlider").slider({ min: 0,
                          max: 90,
                          step: 5,
                          value: parseInt($('input#calcSup').val()),
                          slide: function (event, ui) {
                              $("#calcSup").val(ui.value);
                          }
                       });
                    });

<input type="text" id="calcSup" name="calcSup" value="${form.calcSup}" size="3" readonly="readonly"/>

answered May 10 '12 at 19:51

Rob Angelier

2,335
16
29

I know, the answer to your problem is simple. Good luck! – Rob Angelier May 10 '12 at 19:55
The `parseInt` method is lacking a radix, which would convert something like "023" to 19. `parseInt` interprets strings with leading-zeroes as base-8 (with the exception of `0x`, being 16). – Sampson May 10 '12 at 20:16
why would I have a leading 0? – Doc Holiday May 10 '12 at 20:18

score 2 · Answer 2 · answered May 10 '12 at 19:53

If you're going to parse the value to an integer, don't forget to include the radix so it doesn't wind up getting confused for base-8 or something.

$("#mySlider").slider({
  // Set initial value to that of <input type="text" id="bar" value="23" />
  value: parseInt( $("#bar").val(), 10 ),
  // Update <input type="text" id="foo" /> anytime we slide
  slide: function ( event, ui ) {
    $("#foo").val(ui.value);
  }
});

Demo: http://jsbin.com/oceqab/edit#javascript,html

score 0 · Answer 3 · answered May 10 '12 at 19:52

This might be what you are looking for:

$(function () {
    $("#calcSlider").slider({ min: 0,
                          max: 90,
                          step: 5,
                          value: parseInt($("#calcSup").val()),
                          slide: function (event, ui) {
                              $("#calcSup").val(ui.value);
                          }
    });
});

Loading Value of Input into Slider Options

3 Answers3