Number of digits displayed in a slider's label suddenly changes
I would like to understand why, for the second slider but not the first, when the slider reaches the top the value displayed suddenly shows many digits after the decimal point instead of just showing tenths (which is what I want).
Thanks for edifying me.
<!doctype html>
<html lang="en">
<html lang="en">
<head>
<link rel="stylesheet" href="
http://code.jquery.com/ui/1.11.3/themes/south-street/jquery-ui.css" />
<script src="
http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="
http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
sliders(4.4, 16.4);
function sliders(startvalue1, startvalue2){
$("#slider1").slider({
orientation: "vertical",
range: "min",
min: 2,
max: 15,
step: .1,
value: startvalue1,
slide: function( event, ui ) {
$("#variable1").val(ui.value);
}
});
$("#variable1").val( $("#slider1").slider("value") );
$("#slider2").slider({
orientation: "vertical",
range: "min",
min: 2,
max: 50,
step: .1,
value: startvalue2,
slide: function( event, ui ) {
$("#variable2").val(ui.value);
}
});
$( "#variable2" ).val( $( "#slider2" ).slider( "value" ) );
}
} );
</script>
<style>
section.slider {
float: left;
width: 250px;
}
</style>
</head>
<body>
<div>
<section class = "slider">
<p>
<label for="variable1"><b>first slider:</b></label>
<input type="text" id="variable1" readonly style="border:0; color:#f6931f; font-weight:bold; width: 60px;">
</p>
<div id="slider1" style="margin:40px; height:200px;"></div>
</section>
<section class = "slider">
<p>
<label for="variable2"><b>second slider:</b></label>
<input type="text" id="variable2" readonly style="border:0; color:#f6931f; font-weight:bold;width: 60px;" >
</p>
<div id="slider2" style="margin:40px; height:200px;"></div>
</section>
</body>
</html>