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

Question

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

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

So far, I can make the first part of the goal work normally with the following code. The result can be seen here at 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"));
});

Part Two > Update Slider if the user enters a value in the text input:

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

I tried to follow some instructions and solutions posted in stackoverflow in English, as we can see in this stack here https://stackoverflow.com/a/7524385/1152876, however, I am not able to implement the solutions proposed in the discussion.

*Just for the record, in case there’s any interference: On the site I’m implementing Slider, I’m also using jQuery UI Touch Punch https://github.com/furf/jquery-ui-touch-punch#readme to add Touch event support to the jQuery UI library when used on mobile devices, since by default the jquery-ui library does not work.

Answer 1

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

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

^{Demo no jsfiddle}