On my page I have several sliders. They all need the same scale, but some of them go to 150, and some go to 200. I would like to set the max of them all to 200, but prevent some of them from moving passed 150. They are different $().slider() calls, so I'm simply interested in how to set the max of a slider to 200, but not allow any movement past 150...
I would think that this kind of behavior would be built-in, but apparently not?
FYI: I am using range: "min" for these sliders.
EDIT
http://jsfiddle.net/D9nAx/1/
use slide event:
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 200,
value: 60,
slide: function( event, ui ) {
if(ui.value> 150)
return false;
$( "#amount" ).val( ui.value );
}
});
fiddle : http://jsfiddle.net/dvz8E
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 200,
value: 60,
slide: slide
});
function slide(event, ui){
var result = true;
if (ui.value > 150){
$(this).slider( "value" , 150 );
result = false;
}
$( "#amount" ).val( $(this).slider( "value") );
return result;
}
http://jsfiddle.net/D9nAx/2/
Related
Function not triggered when moving slider to fast. I'm calling function using "slide" with Jquery UI slider. Is there a way to force it to call the function on each step? Here's the code:
var last = currentZoom;
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0.2,
max: 1.3,
value: currentZoom,
step: 0.1,
slide: function( event, ui ) {
if (ui.value > last) {
zoomIn();
}else{
zoomOut();
}
console.log($( "#slider-vertical" ).slider('value'));
last = ui.value;
}
});
So just to recap, while sliding it to fast it doesnt recognize the slide and it leads to it on skipping steps resulting in inaccurate values.
Thanks
I have a form with random filters and a slider that adjusts the width/height of items.
How can I save the slider value once the form is submitted so that when I go back to the slider, I see the value I left it on?
My attempt:
<input type="text" id="amount" name="slider_id" value="<?php if (isset($_POST['slider_id'])){ echo $_POST['slider_id']; }?>">
<div id="slider"></div>
The Javascript:
$(function() {
$( "#slider" ).slider({
value:$("input[name='slider_id']").val(), min: 80, max: 400, step: 10,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value-70 + "%" );
$('.display').css('width', ui.value + 'px');
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "%" );
});
Right now it will show NaN after the form is submitted. All help is much appreciated!
Looks to me that the problem is in php value set.
Just modify the value of the input before calling the slider.
$(function () {
var newVal = $('input').val().replace("%","");
$('input').val(newVal);
$("#slider").slider({
value: $("input[name='slider_id']").val(),
min: 80,
max: 400,
step: 10,
slide: function (event, ui) {
$("#amount").val(ui.value - 70 + "%");
$('.display').css('width', ui.value + 'px');
}
});
$("#amount").val($("#slider").slider("value") + "%");
});
http://jsfiddle.net/joeSaad/hZCDZ/#base
Your problem is here: $("input[name='slider_id']").val()
Debug it and you'll find that it's some form of "nn%", thus, a string.
$.slider requires that value be numeric.
You need to parse it somehow:
value: parseInt($("input[name='slider_id']").val().replace('%', ''), 10)
I create 3 slider, [Slider 1, Slider 2, Slider 3], and they work fine individually. but I want to make them depend on each other and work respectively to main slider.
You can see my demo here : JSFIDDLE
Main slider is Slider 1, and other slider 2 and slider 3 are depend on slider 1.
If slider 1's value increase (when we slide slider) then slider 2's and slider 3's value should increase too. and same as with when we decrease value.
Second point : If we set slider 1 to 100 and then slider 2 and 3 also on value of 100 (Automatically), then 100 is min. value of slider 2 and 3. in short value of slider 1 is minimum value of slider 2 and 3.
For Example is slider 1 set to 500 then slider 2 and 3 can slide to increase to more then 500 but can not decrease lower then 500.
here is a sample of my code
<div id="slider1"></div><br>
<div id="slider2"></div><br>
<div id="slider3"></div><br>
Slider 1 : <div id="value1"></div><br>
Slider 2 : <div id="value2"></div><br>
Slider 3 : <div id="value3"></div><br>
jQuery
$(function() {
$( "#slider1" ).slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
$( "#value1" ).text(ui.value);
$( "#slider2" ).slider('option',{min: ui.value});
$( "#slider2" ).slider('value',ui.value);
$( "#slider3" ).slider('option',{min: ui.value});
}
});
});
$(function() {
$( "#slider2" ).slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
$( "#value2" ).text(ui.value);
$( "#value2" ).val( "$" + $( "#slider2" ).slider( "value" ) );
$( "#amount" ).val( "$" + ui.value );
}
});
});
$(function() {
$( "#slider3" ).slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
$( "#value3" ).text(ui.value);
$( "#value3" ).val( "$" + $( "#slider3" ).slider( "value" ) );
$( "#amount" ).val( "$" + ui.value );
}
});
});
You shouldn't use min option from slider.
Use return false on slide event when the value will be lower than slider1
Example in jsfiddle
Full code:
$(function() {
$( "#slider1" ).slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
$( "#value1" ).text(ui.value);
$('#value2').text(ui.value); // slider 2 text
$('#value3').text(ui.value); // slider 3 text
$( "#slider2" ).slider('value',ui.value);
$('#slider3').slider('value',ui.value);
//$( "#slider2" ).slider('option',{min: ui.value}); remove this
//$( "#slider3" ).slider('option',{min: ui.value});
}
});
$( "#slider2" ).slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
if(ui.value < $('#slider1').slider('value')){ // if the value is lower than slider 1
return false; // don't slide
}
$( "#value2" ).text(ui.value);
$( "#value2" ).val( "$" + $( "#slider2" ).slider( "value" ) );
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#slider3" ).slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
if(ui.value < $('#slider1').slider('value')){ // if the value is lower than slider 1
return false; // don't slide
}
$( "#value3" ).text(ui.value);
$( "#value3" ).val( "$" + $( "#slider3" ).slider( "value" ) );
$( "#amount" ).val( "$" + ui.value );
}
});
});
I made some change to your code.
Basically, setting the min value will not alwas change the slider position, you are juste setting the value when the slider is all left. In the example the slider 2 set it's min value depending on the current slider1's value. The slider 3 is setting it's min showed value the depending on the current slider1's value.
You can optimize a little bit but I think this is what you want to achieve !
//min value of slider 2 = current value of slider 1
$( "#slider2" ).slider('option',{min: ui.value});
//slider 3 cannot be under slider 1
if($( "#slider3" ).slider("value") < ui.value)
$( "#slider3" ).slider('option',{value: ui.value});
Check it here
it's a bit messy...anyway i hope this could help you out:
$(function() {
$( "#slider1" ).slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
$( "#value1" ).text(ui.value);
if(ui.value%100 == 0)
{
$( "#slider2" ).slider('option',0);
$( "#slider2" ).slider('value',0);
$( "#slider3" ).slider('option',0);
}
else{
$( "#slider2" ).slider('option',{min: ui.value});
$( "#slider2" ).slider('value',ui.value);
$( "#slider3" ).slider('option',{min: ui.value});
}
}
});
});
just to highlight an important point, I have just realized it accepts ONLY Integer values on this command:
$( "#slider2" ).slider('value',IntValue);
So, if you needed to change its value by passing input text, then you must cast it this way:
parseInt($("#input_text_slider2").val())
so you are able to put that value using the variable IntValue above.
I'm pretty new to jquery, but this is question. From my code below I have made 3 sliders each within a tag. Each of the three has an input field that is changed when the slider is moved to show the current value of the slider (simple jQueryUI plugin sliders). The final line involves another plugin that links all the sliders together so that they all add to 100 total and move when the others move.
The problem I'm having is that when I slide one, its value changes and shows but the others do not. I can get all of the values to change with some extra lines of code, but I don't know how to get (this) ui.value so that I can display the separate values for each of the sliders.
You can see in the third slider I tried to get it to do that, but the way it is set it only takes the same ui.value of the current slider being moved.
Can anyone help me with a solution to get (this) ui.value of the other sliders when i need to change it?
($(function() {
$( "#RedSlider" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 1,
animate: true,
slide: function( event, ui ) {
$( "#RedValue" ).val( ui.value );}
});
$( "#RedValue" ).val( $( "#RedSlider" ).slider( "value" ) );
});
$(function() {
$( "#BlueSlider" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 1,
animate: true,
slide: function( event, ui ) {
$( "#BlueValue" ).val( ui.value );}
});
$( "#BlueValue" ).val( $( "#BlueSlider" ).slider( "value" ) );
});
$(function()
{
$( "#EmptySlider" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 98,
animate: true,
slide: function( event, ui )
{
$( "#EmptyValue" ).val( ui.value );
$( "#RedValue").val(ui.value);
$( "#BlueValue").val(ui.value);
}
});
$( "#EmptyValue" ).val( $( "#EmptySlider" ).slider( "value" ) );
$( "#RedValue").val($("RedSlider)").slider("value"));
$( "#BlueValue").val($("RedSlider)").slider("value"));
});*/
$('div:gt(2)').slider().linkedSliders({policy: 'last'});
Your code will only every be executed once. You need to change the following line:
$( "#BlueValue" ).val( $( "#BlueSlider" ).slider( "value" ) );
To be something different when selecting the value of your slider at whatever time you need it.
This code:
$( "#BlueValue" ).val( $( "#BlueSlider" ).slider( "value" ) );
will only execute once. You need to have that in a value-changed callback for the slider, so the value will be updated continually.
How to make slider with jquery, like here?
User should select a value from slider, and this value should automatically be in input
I can not find the appropriate plug-in...
http://jqueryui.com/demos/slider/
$( "#slider" ).slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
//Its setting the slider value to the element with id "amount"
$( "#amount" ).val( "$" + ui.value );
}
});
You can customize the style to look like the example you mentioned.