jQuery UI Slider (setting from text input)

Question

I'm using jQuery UI sliders to set values in text boxes. I'd like this to work both ways though, so, if a value is placed in the a text box, I'd like the slider to move to the relevant position.

I'm not certain on the best solution for this though.

I have the following markup:

<label for="amount-depoist">Deposit Amount (&pound;):</label>
<input type="text" id="amount-deposit" >
<div id="slider-deposit"></div>

And the following jQuery:

jQuery( document ).ready(function( $ ) {
            $( "#slider-deposit" ).slider({
                range: "min",
                value: 100,
                min: 0.1,
                max: 0.7,
                step: 1,        

                slide: function( event, ui ) {
                     $( "#amount-deposit" ).val(Number(ui.value).toFixed(2));
                    totalPayableFunc();
                    monthlyPaymentsFunc();
                }
            });
            $( "#amount-deposit" ).val(Number($( "#slider-deposit" ).slider( "value" )).toFixed(2));
            totalPayableFunc();
            monthlyPaymentsFunc();
        });

Currently on on the slider slide: function some functions are called that 'do maths' and a value is set in the amount-deposit text input field. I'd like this text input field to be editable so on keyup the slider will slide to the relevant position. I'm unsure on how I might achieve this though, could anyone some advice.

I have a JS fiddle here: https://jsfiddle.net/liamrfell/nzzb8nad/1/

Ji_in_coding · Accepted Answer · 2016-02-03 20:47:45Z

Conceptually you already knew what you needed to do. on keyup event, you need to obtain the value in inputbox, and put the value into the slider. and the function you are looking for is $( "#slider" ).slider( "option", "value", valueVariable )

HTML:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

<body>
  <label>InputBox:</label>
  <input type="number" id="inputbox" />
  <br>
  <br>

  <div id="slider"></div>
</body>

JS:

$(document).ready(function(){
  $("#inputbox").val(50);
  $( "#slider" ).slider({
    range: "min",
    value: 50,
    min: 1,
    max: 100,
    step: 1,        

    slide: function( event, ui ) {
      var value = $( "#slider" ).slider( "option", "value" );
      //on slide update inputbox
      $('#inputbox').val(value);

       //whatever other tasks you need to do.
    }
  });

  $("#inputbox").keyup( function(){

     //whatever other tasks you need to do.

    $( "#slider" ).slider( "option", "value", parseInt($(this).val()) );

    //whatever other tasks you need to do.

  });

});

Codepen Link: http://codepen.io/anon/pen/bExger

Collectives™ on Stack Overflow

jQuery UI Slider (setting from text input)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related