Develop Reference

jQuery UI slider with decimal support

I'm trying to get jQuery UI slider to work with decimals. Issue is slider is increasing the wrong way.
I want the slider to increase 0.3 -> 0.4 -> 0.5 -> 0.6 so on. but in below code it increase 0.3 -> 1.3 - > 2.3 -> 3.3 so on. How can i get this to increase the correct way
Here is my code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0.3,
max: 5.03,
values: [ 0.3, 5.30 ],
slide: function( event, ui ) {
$( "#amount" ).html( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
$( "#amount1" ).val(ui.values[ 0 ]);
$( "#amount2" ).val(ui.values[ 1 ]);
}
});
$( "#amount" ).html( $( "#slider-range" ).slider( "values", 0 ) + " - " + $( "#slider-range" ).slider( "values", 1 ) );
});
Appreciate your time.

You have to pass step in config and specify the value by which it has to increment
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0.3,
max: 5.30,
step: 0.1, // <-- new config
values: [ 0.3, 5.30 ],
slide: function( event, ui ) {
$( "#amount" ).html( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
$( "#amount1" ).val(ui.values[ 0 ]);
$( "#amount2" ).val(ui.values[ 1 ]);
}
});
$( "#amount" ).html( $( "#slider-range" ).slider( "values", 0 ) + " - " + $( "#slider-range" ).slider( "values", 1 ) );
});

Jquery UI range slider displaying wrong max value

I have slider like this,
var max=Number(data[0].max);
var min=Number(data[0].min);
$("#slider-range-"+field_name ).empty().slider({
range: true,
min: min,
max: max,
step:step_value,
values: [ 0, max],
slide: function( event, ui ) {
$( "#"+$(this).data("id")).val(ui.values[ 0 ] + " - " + ui.values[ 1 ] );
}
}).slider("pips", {
rest: false
}).slider("float", {
handle: true,
pips: false,
labels: false,
prefix: "",
suffix: ""
});
$("#"+field_name).val( $( "#slider-range-"+field_name ).slider( "values", 0 ) + " - "
+ $( "#slider-range-"+field_name ).slider( "values", 1 ) );
Here, If I pass value as max like max = 3.6, slider will display max as 3.59999999996. But If I pass hardcore value then it will display properly.
Why it is behving like this? Is there any library issue, But I have already changed my library version also. If anyone knows please help me.

how to use mouseup event in jquery range slider

I want to call 'searchdata' function on mouseup event or slider stop.from this code slider call 'searchdata' function on sliding i also use slidestop event.
$( function() {
$( "#age-range" ).slider({
range: true,
min: 18,
max: 60,
values: [$("#agehide1").val() , $("#agehide2").val()],
slide: function( event, ui ) {
$( "#age" ).val( ui.values[ 0 ] + "yrs to " + ui.values[ 1 ]+" yrs " );
$("#fromage").val(ui.values[ 0 ]);
$("#toage").val(ui.values[ 1 ]);
searchdata();
}
});
$( "#age" ).val( "" + $( "#age-range" ).slider( "values", 0 ) +
" to " + $( "#age-range" ).slider( "values", 1 ) );
$("#fromage").val($("#age-range").slider( "values", 0 ));
$("#toage").val($("#age-range").slider( "values",1 ));
} );

Here you go:
$(function() {
$("#age-range").slider({
from: 0,
to: 5,
smooth: true,
step: 10,
round: 0,
callback: function(val){
console.log(val);
}
});
});

Identifying minimum and maximum value of a slider range

I want to grab the minimum and maximum value of a price range.
Below is the fiddle:
http://jsfiddle.net/dhana36/b453V/2/
The ideal solution would be for me to have two inputs, one for minimum and one for maximum. Right now there just one input that controls both.
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
JS
$(function() {
$('select').change(function(){
$( "#amount" ).val( $('select').val() + $( "#slider-range" ).slider( "values", 0 ) +
" - "+ $('select').val() + $( "#slider-range" ).slider( "values", 1 ) );
})
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( $('select').val() + ui.values[ 0 ] + " - "+ $('select').val() + ui.values[ 1 ] );
}
});
$( "#amount" ).val( $('select').val() + $( "#slider-range" ).slider( "values", 0 ) +
" - "+ $('select').val() + $( "#slider-range" ).slider( "values", 1 ) );
});

try this:
<input type="text" id="min">
<input type="text" id="max">
javascript
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$("#min").val($('select').val() + ui.values[ 0 ]);
$("#max").val($('select').val() + ui.values[ 1 ]);
},
create: function (event, ui){
$("#min").val($("#slider-range").slider("values")[0]);
$("#max").val($("#slider-range").slider("values")[1]);
}
});
});

How To Make Multiple Labels Appear In JQuery Range Slider?

I'm trying to figure out how to make a slider say two separate things. I want the input above the slider to say the dollar amount (between 20 and 45) with twenty steps of $1.25 -- but i want the actual handle to say only single integer answers like 1..2..3..4..all the way to 20, so the first position would read (1) in the handle and ($20) above it and the second step of the slider would read (2) in the slider circle and ($21.25) above it.
Below is my code so far:
$(function() {
$( "#slider" ).slider({
value: 0,
min: 20,
max: 45,
step: (1.25),
slide: function( event, ui ) {
var id = $(this).attr("id");
$("span[class*=" + id + "]").text(ui.value);
$("input[class*=" + id + "]").val(ui.value);
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ).toFixed( 2 ));
});

I think this is what you are looking for... Check the fiddle:
http://jsfiddle.net/rx4cm4q7/4/
$(function () {
$("#slider").slider({
value: 0,
min: 20,
max: 45,
step: (1.25),
slide: function (event, ui) {
console.log(ui);
var id = $(this).attr("id");
var x = (ui.value - 20)/1.25;
console.log(x);
$("#amount").html("$" + ui.value);
$("#step").html("<B>" +x+"</b>");
}
});
});