How can I set a default value to a textbox that displays my jquery slider value

Question

I have a jquery slider that has a min value of 1 and a max value of 400. when I move the slider, the corresponding value is shown on a textbox. However I want to display the minimum on pageLoad both on the text box and the slider please how can I achieve thi? this is my slider code

/*slider begin*/

    $("#slider").slider({

        value:1,
        max:400,
        min:1,
        /*
         change:function(event,ui){
                     $("input#amt").val(ui.value)
                 }
         */

        slide: function(event, ui) {   $("#amt").val(ui.value) }

    });

     $("#amt").change(function(event) {
   var data = $("#amt").val();
   if (data.length > 0) 
   {
      if (parseInt(data) >= 0 && parseInt(data) <= 400) 
      {
          $("#slider").slider("option", "value", data);
      }
      else
      {
        if (parseInt(data) < 0) 
        {
          $("#amt").val("0");
          $("#slider").slider("option", "value", "0");
        }
        if (parseInt(data) > 400) 
        {
          $("#amt").val("400");
          $("#slider").slider("option", "value", "400");
        }
     }
   }
    else
    { 
      $("#slider").slider("option", "value", "1"); 
    }   
   });

    /*slider end*/

score 2 · Accepted Answer · answered Aug 29 '12 at 10:55

2

You can set the slider value first:

$("#slider").slider( "value" , 1);

And then read it to set the text box value (or just set the text box value to -1 as well but that's less pretty)

$("#amt").val($("#slider").slider( "value"));

answered Aug 29 '12 at 10:55

Asciiom

9,867
7
38
57

You're welcome :) If this answered your question, please click the "V" on the left of this answer to mark it as solved. – Asciiom Aug 29 '12 at 11:03

woggles · Answer 2 · 2012-08-29T11:04:13.697

Your slider should be set to 1 as is - the value option of the slider does the following. From the API:

Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.

Code examples

Initialize a slider with the value option specified.

$( ".selector" ).slider({ value: 37 });

You can set the value of the textbox as follows:

$("#amt").val(1);

How can I set a default value to a textbox that displays my jquery slider value

2 Answers2