<!-- 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]);
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'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 ) );
});
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 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]);
}
});
});