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
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);
} );
New to front-end development and getting confused with jQuery. I have a jQuery slider with custom steps, but can't get the output to sync with the rest of my program. I think I need .addEventListener('input') to take the values produced by the slider so that the text at the bottom of the output (#infocenter) updates with the year chosen by the slider.
document.getElementById('infocenter').innerHTML = '<p>(this text should update with the year above)</p>';
var sliderAmountMap = [1940, 1950, 1960, 1970, 1980, 1990, 2009, 2015];
//new jQuery slider
$(function() {
$( "#slider" ).slider({
value: 0,
min: 0,
max: sliderAmountMap.length-1,
slide: function( event, ui ) {
$( "#amount" ).val(sliderAmountMap[ui.value] );
}
});
$( "#amount" ).val(sliderAmountMap[$( "#slider" ).slider( "value")] );
});
https://jsfiddle.net/kaseyklimes/c0xpL1va/
If I understand correctly, I think you just need to update the html of the desired element at the same time you're updating the value of the text box:
slide: function( event, ui ) {
$( "#amount" ).val(sliderAmountMap[ui.value]);
$( "#infocenter" ).html(sliderAmountMap[ui.value]);
}
Updated JSFiddle
i have a problem with jquery slider value after changing it.
I'm just using normal jquery UI (version 1.10.4) and jquery core 1.7.2
First time after refresh i have a value which i want. But after the change i can't get it. And i need that to have a if statemnet which will change a value of the paragraph.
This is a JQuery code:
$(function() {
$( "#slider" ).slider({
range:"min",
min: 0,
max: 100,
value: 10,
slide: function wynik( event, ui ) {
$( "#price" ).val("$" + ui.value);
}
});
$( "#price" ).val( "$" + $( "#slider" ).slider( "value") );
var val = $('#slider').slider("value");
if ( val >= 20 ) {
$("#priceText").text("first text");
} else {
$("#priceText").text("second text");
}
});
What is wrong here?
I want to change a text in label:
<p>
<input type="text" id="price">
<label id="priceText" for="price">Some text to change</label>
</p>
Input working correctly and show the value all the time in right way. But label doesn't change (only first time after refresh).
I have read a lot of posts on SO before i post this one. For example:
How to get value from jQuery UI slider? or How to get value from input with dynamically changed value by jquery UI slider?
But i can't get it done anyway.
You can try this:
$("#selector").change(function() {
$("#slider-range").slider('values',0,$(this).val());
});
Working Fiddle
Jquery Slider emit a "slidechange" event everytime it change value
Remember, it should be listened on the jQuery element after you've registered the event in the element itself
$( "#slider" ).slider({
change: function( event, ui ) {
// register event here
}
});
$( "#slider" ).on( "slidechange", function( event, ui ) {
// use ui.value to get the current value
} );
Check the official api wiki for all the slider related events
Official Slider Api
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" ) );
});
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.