I have the following slider, but I can not place some buttons on the sides of forward and backward to have more precision.
$("#mySlider").slider({
range: "min",
value: 0,
min: 10000,
max: 300000,
step: 500
});
I do not know if there is any property to put those buttons for which I have searched several pages and I have found nothing.
Just as there is no property to add the buttons, but you can add them manually and using the value You can change the value of your slider, for example:
var valorSlider = $("#mySlider").slider("value"); //Obtenemos el valor del slider
$("#mySlider").slider("value", valorSlider+5000); //A el valor obtenido le sumamos cierta cantidad
The previous code works to increase the value, you can do the same to reduce the value, you just have to change the sign.
The HTML code would be, I added a container for the slider:
<button id="agregar">+</button>
<div class="container">
<div id="mySlider"></div>
</div>
<button id="restar">-</button>
Styles, you have to give the slider a width and put the inline-block elements:
button{
display: inline-block;
}
.container{
display: inline-block;
margin: 10px 20px 0px 20px;
width: 200px;
}
The JS code would be:
$("#mySlider").slider({
range: "min",
value: 0,
min: 10000,
max: 300000,
step: 500
});
$('#agregar').click(function(){
var valorSlider = $("#mySlider").slider("value");
$("#mySlider").slider("value", valorSlider+5000);
});
$('#restar').click(function(){
var valorSlider = $("#mySlider").slider("value");
$("#mySlider").slider("value", valorSlider-5000);
});
Here I'll give you an example on fiddle.