Update jQuery UI Slider on text input value change
HTML
<div id="slider-idade"></div>
<input id="valor-idade" type="text" />
CSS
#slider-idade {
float: left !important;
width: 420px !important;
margin: 20px;
}
#valor-idade {
color: #3fa635;
font-size: 28px !important;
border: 1px #3fa635 dotted !important;
border-radius: 3px !important;
width: 70px !important;
vertical-align:middle;
margin-top:8px;
}
.ui-slider .ui-slider-handle {
width: 1.4em !important;
height: 1.4em !important;
cursor: default;
border-radius: 50px !important;
-moz-border-radius: 50px !important;
-webkit-border-radius: 50px !important;
}
.ui-slider-handle .ui-state-default, .ui-widget-content .ui-state-default {
border: 0px solid #BDC3C7 !important;
background: #BDC3C7 !important;
color: #34495E;
}
.ui-slider-handle .ui-state-hover, .ui-widget-content .ui-state-hover {
border: 0px solid #7F8C8D !important;
background: #7F8C8D !important;
background-image: none !important;
color: #34495E;
}
.ui-slider-handle .ui-state-active, .ui-widget-content .ui-state-active {
border: 0px solid #3FA635 !important;
background: #3FA635 !important;
background-image: none !important;
font-weight: normal;
color: #fff;
}
.ui-slider .ui-slider-range {
position: absolute;
background-position: 0 0;
border-radius: 3px !important;
-moz-border-radius: 3px !important;
-webkit-border-radius: 3px !important;
background: #59BA41 !important;
}
.ui-widget-content {
background-image: none !important;
background: #ECF0F1 !important;
border: 0px solid #3FA635 !important;
border-radius: 3px !important;
-moz-border-radius: 3px !important;
-webkit-border-radius: 3px !important;
color: #fff;
}
JavaScript
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"));
$("#valor-idade").change(function(){
$("#slider-idade").slider("value", this.value)
});
});