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 ) );
});
Related
I have slider for price range search function using UI and javascript.
Here is the code.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Here is the javascript.
<script>
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 10000,
values: [ 2000, 5000 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
} );
</script>
Here is the html code.
<input type="text" id="amount">
<input value="<?php echo "ui.values[ 0 ]";?>" name="min-price" id="select-min-price" type="hidden">
<input value="<?php echo "ui.values[ 1 ]";?>" name="max-price" id="select-max-price" type="hidden">
<div id="slider-range"></div>
My question is how can I get the value of min and max from that slider range so I can put into the field. (what should I put on the value from field min-price and field max-price)
You can set values of min-price and max-price in the slider function, as below:
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 10000,
values: [ 2000, 5000 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
$("#select-min-price").val(ui.values[ 0 ]);
$("#select-max-price").val(ui.values[ 1 ]);
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); });
You can have a look here: https://jsfiddle.net/ashokgharpankar/dy29xkq7/10/
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 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]);
}
});
});
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.)
<!-- dirty -->
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
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 ) );
});
</script>
</head>
<div class="demo">
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider-range"></div>
</div>
<button type="button"
onclick='$("#slider-range").slider("value", $("#slider-range").slider("option", "min") );'>
Test
</button>
Clicking on the button does not reset the slider. Any clues?
Not storing your original options / multiple slider reset
If you don't want to store your original value or you have multiple sliders try this:
// Reset the sliders to their original min/max values
$('.slider').each(function(){
var options = $(this).slider( 'option' );
$(this).slider( 'values', [ options.min, options.max ] );
});
In relation to your code see this demo.
For Range Sliders you need to use the method .slider("values", index, value) instead.
<script>
function resetSlider() {
var $slider = $("#slider-range");
$slider.slider("values", 0, initialMinimumValue);
$slider.slider("values", 1, initialMaximumValue);
}
</script>
<button type="button" onclick='resetSlider();'>Test</button>
Check out my answer here jsfiddle
$(function() {
var options =
{
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
};
$( "#slider-range" ).slider(
options
);
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
$("#button").click(function()
{
$("#slider-range").slider("values", 0, options.values[0]);
$("#slider-range").slider("values", 1, options.values[1] );
$( "#amount" ).val( "$" + options.values[0] + " - $" + options.values[1] );
});
});
You may try as
function PrimarySlider() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
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 ) );
});
}
call the function PrimarySlider(); whenever you need slider and reset by calling
function ResetPrimarySlider() {
$( "#slider-range" ).slider("destroy");
PrimarySlider();
}
You also can reset in one line of code (if you use the range option in slider)
$("#slider-range").slider("option", "values", [some_min_val, some_max_val]);