How to show the value of the jQuery UI Slider in a text input and update the Slider if a value is entered in the text input?

Navigation
2

The result I need to achieve using the jQuery UI Slider seems simple. The Slider will be used to define the age of the user who would submit the form, with a minimum value of 18 (years) and a maximum of 100 (years) ... The intended purpose can be divided into two parts:

First part > Show the Slider value in a text input:

So far, I get the first part of the goal to work normally with the following code. The result can be seen here in jsfiddle. 

jQuery(document).ready(function($) {
 $("#slider-idade").slider({
  range: "min",
  value: 18,
  min: 18,
  max: 100,
  step: 1,
  animate: 200,
  slide: function(event, ui) {
 $("#valor-idade").val(ui.value);
}
 });

 $("#valor-idade").val($("#slider-idade").slider("value"));
});

Second part > Update the Slider if the user enters a value in the text input:

------ // ------

I tried to follow some instructions and solutions posted on stackoverflow in English, as we can see on this stack here link , however, I am not able to implement the proposed solutions in the discussion.

* Just to state, if there is any interference: In the site I'm implementing Slider, I'm also using jQuery UI Touch Punch link to add support for Touch events to the jQuery UI library when used on mobile devices, as by default the jquery-ui library does not work.

    
asked by anonymous 05.03.2014 / 22:39

1 answer

3

Just put an event to monitor when the text field has changed, and update the slider with this value: 

$("#valor-idade").change(function(){
    $("#slider-idade").slider("value", this.value);
});

Demo on jsfiddle

    
05.03.2014 / 22:53
Problem with Seed Relationship between Category and Sub-Category in Laravel 4 Editing page content via JQuery and leaving it fixed