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);
} );
Related
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 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 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" ) );
});
I am trying to use jquery-ui slider ( http://jqueryui.com/demos/slider/#steps ) where the value of the slider position is displayed in an input box, and change in input box value re-positions the slider index.
js snippet:
$("#slider, ").slider({
range: "min",
value: 1,
step: 4,
min: 1,
max: 18,
slide: function( event, ui ) {
$( ".slider_input" ).val( "$" + ui.value );
//$( ".slider_input" ).val( ui.value );
}
});
$(".slider_input").change(function () {
var value = this.value.substring(1);
$("#slider").slider("value", parseInt(value));
});
html:
<div id="slider"></div>
<input class="slider_input" />
But I want to remove the dollar sign from the input . If I use $( ".slider_input" ).val( ui.value ); instead of $( ".slider_input" ).val( ui.value );, then manual change in input box value does not move the slider index position as expected.
How can I remove the dollar sign and make the slider work accordingly?
You can use the spit function.
> "$42.00".split('$')
[ '', '42.00' ]
> "$42.00".substring(1)
'42.00'
Here is a working fiddle: http://jsfiddle.net/ranjith19/wm8Dh/5/
Use replace to remove $ from the value.
$( ".slider_input" ).val( ui.value.replace("$","") );