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>");
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.