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.
Related
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);
}
});
});
I'm having trouble getting the values from a 2 way (range) jquery slider. I have tried various things but none worked.
My text field which contains the info has [int - int] structure.
What I am trying to do is to get the 2 range values from the slider into the url get at the end of the script.
JavaScript:
var val1 = 0;
var val2 = 0;
$(function() {
$( "#slider-3" ).slider({
range:true,
min: 1,
max: {{ $data['labels'] }},
values: [ 1, {{ $data['labels'] }} ],
slide: function( event, ui ) {
$( "#price" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
val1 = ui.values[0];
val2 = ui.values[1];
}
});
$( "#price" ).val( $( "#slider-3" ).slider( "values", 0 ) +
" - " + $( "#slider-3" ).slider( "values", 1 ) );
});
$('#fetchLabels').on('click', function(){
location.href="{{ url('labels/objects') }}/" + val1 + "/" + val2;
});
EDIT: With some trouble shooting I am finding that the values are not getting set. They remain only at 0 and 0...
I fixed this. Apparently the values are only changed when the bar moves. So I had to set the val 1 and val 2 to the appropriate starting point.
Javascript:
var val1 = 1;
var val2 = {{ $data['labels'] }};
$(function() {
$( "#slider-3" ).slider({
range:true,
min: 1,
max: {{ $data['labels'] }},
values: [ 1, {{ $data['labels'] }} ],
slide: function( event, ui ) {
val1 = ui.values[ 0 ];
val2 = ui.values[ 1 ];
$( "#price" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
}
});
$( "#price" ).val( $( "#slider-3" ).slider( "values", 0 ) +
" - " + $( "#slider-3" ).slider( "values", 1 ) );
});
$('#fetchLabels').on('click', function(){
var urlee = "{{ url('label/objects') }}/" + val1 + "/" + val2;
location.href=urlee;
});
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>");
}
});
});
I have a jquery ui slide ranger which has two prices. A min price and a max price. How can I put the min and max into seperate variables? I want to create if statements but not inside the slide ranger function but in a search button function. When the user clicks search, it will get the min price and the max price that the user selected and output results of products. Is this possible and how could i do this?
Here is my slide ranger code
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 249500,
max: 750000,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "£" + $( "#slider-range" ).slider( "values", 0 ) +
" - £" + $( "#slider-range" ).slider( "values", 1 ) );
});
Thank you for your help.
You can access the min and max range of the slider using the option method as shown below:
$(function() {
$("#slider-range").slider({
range: true,
min: 249500,
max: 750000,
values: [75, 300000]
});
$("button").click(function() {
var min = $("#slider-range").slider("option", "min"),
max = $("#slider-range").slider("option", "max")
console.log("min: " + min+" max: " + max);
});
});
<link href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="slider-range"></div>
<button>Search</button>
You can access the min and max of current range using the values option as shown below:
$(function() {
$("#slider-range").slider({
range: true,
min: 249500,
max: 750000,
values: [75, 300000]
});
$("button").click(function() {
var min = $("#slider-range").slider("option", "values")[0],
max = $("#slider-range").slider("option", "values")[1];
console.log("low: " + min+" high: " + max);
});
});
<link href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="slider-range"></div>
<button>Search</button>
I need some help in creating this dynamic range slider since I'm not so good at back-end coding.
http://i255.photobucket.com/albums/hh140/testament1234/dynamicrangeslider_zpsb2ae70b4.jpg
Basically the objective here is if the user check the option for 90 pesos and above or 90 pesos to 1000 pesos the slider will change the min and max range.
Here is what i have started.
Javascript/Jquery
<script>
jQuery(function() {
jQuery( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
step:5,
values: [ 0, 300 ],
slide: function( event, ui ) {
jQuery( "#amount" ).val( "Php" + ui.values[ 0 ] + " - Php" + ui.values[ 1 ] );
}
});
jQuery( "#amount" ).val( "Php" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
All i need to do is to know what to replace or what to add.
You just have to pass those variables in:
var minimumValue = 0; // Get the minimum pesos somehow
var maximumValue = 1000; // Get the maximum pesos somehow
...
range: true,
min: minimumValue,
max: maximumValue,
...
Hard to know what more to give you than this without more code. (where you're getting these values from, ids, etc.)