I have an array
valmap = [5,4,3,2,1,0,1,2,3,4,5];
Now for example the handle of the slider is on track array[5] which is 0, handle is on the center of the track. When I click on the track array[0] which is 5 the handle should only move to track array[4] which is 1 and not go directly to the end of the track which is array[0] or equals to 5.
It should locate the nearest array. e.g handle is on array[5] is center which have a value of 0. When click on the left track it should find the nearest array and that should be array[4] which have a value of 1.
Again when I click on the track, Now I will click on the right side of the track the handle should move back to array[5] which is the center of the slider which is equal to 0.
How can I do that?
Here's my code:
$(document).ready(function() {
var valMap = [5,4,3,2,1,0,1,2,3,4,5]; //0 is the default camera zoom
var slider = $( "#slider" ).slider({
disabled: false,
animate: true,
min: 0,
max: valMap.length-1,
values: [5],
slide: function( event, ui ) {
$( "#zomlevel" ).val(valMap[ui.values[0]] + "x");
slider.slider("option", "animate", "slow");
}
});
});
Here's a jsfiddle: http://jsfiddle.net/endl3ss/jNwww/
EDIT ADDED EXPLANATION:
For example I click on the left side of the track and the handle is on the center, the handle should not jump directly to the left side of the track where I click the mouse, it should look for the next array and move there instead of jumping to the end of the array.
check this out.. got it finally ..
Hope this is what you are looking for..
$(function() {
var prevValue=100;
$( "#slider" ).slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
if (prevValue>ui.value){
ui.value= prevValue-50;
}else{
ui.value= prevValue+50;
}
prevValue=ui.value;
$( "#amount" ).val( "$" + ui.value );
$( "#slider" ).slider( "option", "value", prevValue );
$('#slider').trigger(e);
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
Related
I created slider using the following code available on jsfiddle:
http://jsfiddle.net/3cpsoft1/
However there is some weird behavior when the max value element of the slider is changing itself when left slider is activated.
I think this has something to do with ui part of the slider function but I don't know what is affecting it.
So at first the correct value is 0.0474 and it should stay that way. But somehow it becomes negative as if one value of step was deducted from it.
You can see that on the fiddle i provided.
Is there a way to fix this?
When you divide your total length by the step, you'll end up with a small remainder which is not able to render. Therefore, you must set it to the smallest decimal value you want slide over. Also, your max value should be outside the bound.
$( function() {
$( "#slider-range-max" ).slider({
range: true,
min: -1000,
max: 0.475,
step: .001,
values: [-1000,0.474],
slide: function( event, ui ) {
$( "#amount1" ).val( ui.values[0] );
$( "#amount2" ).val( ui.values[1] );
}
});
$( "#amount1" ).val( -1000 );
$( "#amount2" ).val( 0.474);
} );
I've set up a JQuery UI range slider with controls, although when clicking on the controls the value sent to a select dropdown is not updated. How could I fix this?
var gmin = 0;
var gmax = 500;
var s = $( "#slider" ).slider({
value:5,
min: gmin,
max: gmax,
step: 100,
slide: function( event, ui ) {
$( "#select span" ).html(ui.value);
}
});
$('#down').click(function() {
s.slider('value', s.slider('value') + s.slider( "option", "step" ) );
});
$('#up').click(function() {
s.slider('value', s.slider('value') - s.slider( "option", "step" ) );
});
View JSFiddle
You need to use the change event, not slide here. slide() only catches manual user slides, not programmatic ones:
var s = $( "#slider" ).slider({
value:5,
min: gmin,
max: gmax,
step: 100,
change: function( event, ui ) {
$( "#select span" ).html(ui.value);
}
});
(Any reason your down button makes it go up and vice versa?)
Since this event wont store value for this element, besides here is workaround:
http://jsfiddle.net/nrNX8/514/
You have to add
$('#select span').text(s.slider('value'));
It may be useful for any element you want to set in any update.
You just need to add this line to the click functions:
$( "#select span" ).html(s.slider('value'));
...on #up and #down listeners.
However, it seems that Ivan's answer is a better approach than mine
I know there is a min value in jquery's slider. However, is there a way I can make the slider handle stop moving under some value? Is there any variable I can change to make this happen?
Note: My Slider is vertical
Basically, if the minimum is 20, I don't want the slider handle going under 20.
Well you can check it in slide functionality as below:
DEMO HERE
$(function() {
$( "#slider-range" ).slider({
orientation: "vertical",
range: false,
value:20,
slide: function( event, ui ) {
if (ui.value < 20) // corrected
return false;
else
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-range" ).slider( "value" ) );
});
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.