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" ) );
});
Currently, I am using the jQuery slider with range. What I want to do is, upon the user submitting the form, I want the two values (max and min) to also be sent over to the controller, so I can save them in the database. They are both currently saved in the variable values:
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 1000000,
step: 10000,
values: [100000 , 300000 ],
slide: function( event, ui ) {
$( "#amount" ).val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ] );
},
stop: function(event, ui) {
var values = $( "#slider-range" ).slider( "values" );
}
});
$( "#amount" ).val( "£" + $( "#slider-range" ).slider( "values", 0 ) +
" - £" + $( "#slider-range" ).slider( "values", 1 ) );
});
I have alerted the variable and it echos the correct two variables. I am at a complete loss as to how to get the two variables, possibly split, over to my Laravel controller, once the user submits the form.
I usually get the form's variables through the Input::get method:
$id = Input::get('id');
But trying to access this variable always returns NULL
Any help would be hugely appreciated.
Here is a jsfiddle of how to get it working properly. My guess is that you forgot to set the "name" attribute on the HTML input field.
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 have a simple slider UI and I want to get the value as it changes dynamically, but I can't seem to make it work. I have:
<script type="text/javascript">
$(function() {
$( "#slider" ).slider({
value:0,
min: 0,
max: 24,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value + " hrs");
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) + " hrs" );
});
});
</script>
and...
<p>
<label for="amount">Time (1hr increments):</label>
<input type="text" id="amount" />
</p>
<div id="slider"></div>
And to check I have it working I am using:
$("#slider").change(function() {
alert($("#slider").val());
});
But no joy. Sorry if I am being overly dumb! Any help would be much appreciated.
Try this instead change() method:
$("#slider").bind("slidechange", function(event, ui) {
alert(ui.value);
});
Have you tried with the jQuery 'on' method?
$('#slider').on('change', function() {
alert($('#slider').val());
});
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.