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("$","") );
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 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 am using the code bellow to use the Jquery UI Slider.
<script>
$(function() {
$( "#slider" ).slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
</script>
How can add multiple sliders with a button? I want to add slider elements when I click the button bellow.
<div id="adding"></div>
And how can I control them? This single slider has a jQuery code to work...
$("#adding").click(function() {
$("<div>").slider({
// options
}).appendTo("#sliderContainer");
});
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.