Trying to change the min and Max value of the Slider defined in Html Code
<input type="range" id="slider" min="0" max="100" value="50" />
at runtime like the following :
$( "#slider" ).slider( "option", "min", 40 );
$( "#slider" ).slider( "option", "max", 90 );
But its not working, Kindly help . No error . Also tried destroy() and refresh() , but no change.
Use .prop() to change min and max and then .slider("refresh") to apply changes.
$("#slider").prop({
min: 40,
max: 90
}).slider("refresh");
Demo
Related
In my project, I have a simple datePicker, and another option to select range-of-days and I display chart according to the selected date(s).
when the user select a date, all works well.
but when the user select range-of-days, I want to display in the datePicker-text-box "(manual selection)".
How can I display my text in the datepicker text-box ?
My code:
$( "#datepicker" ).datepicker({
minDate: new Date(2016, 2 - 1, 11),
maxDate: new Date(2016, 2 - 1, 19),
defaultDate: new Date(2016, 2 - 1, 13),
onSelect: function(dateText, inst) {
DispalyChart(dateText);
}
});
$( "#datepicker" ).datepicker( "setDate", new Date(2016, 2 - 1, 13));
Is it something like appending placeholder to textbox...? please refer below code:
<input type="text" class="datepicker" placeholder="Start date:" />
<script>
$(".datepicker").datepicker({
onSelect: function(arg) {
$(this).val($(this).attr("placeholder") + arg);
}
});
</script>
Can you please take a look at this jsfiddle and let me know how I can use the slider to get values from 0 to 1 like 0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1
Here is what I have
$(function() {
$( "#slider" ).slider({
value:1,
min: 0,
max: 1,
step: 10,
slide: function( event, ui ) {
$( "#opacity" ).val( ui.value );
}
});
$( "#opacity" ).val( $( "#slider" ).slider( "value" ) );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<p>
<label for="amount">Opacity:</label>
<input type="text" id="opacity" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider"></div>
Your step value is too high, try:
$( "#slider" ).slider({
value:1,
min: 0,
max: 1,
step: 0.1,
slide: function( event, ui ) {
$( "#opacity" ).val( ui.value );
}
});
jsfiddle demo
New fiddle demo
I am playing around with the jQuery UI slider and found two examples that look very similar to me.
However, the first slider allows for a handle to be dragged to the other side other handle, whereas the in the second slider, the handles seem to be blocking each other (i.e. you cannot drag the left handle to the right side of the right handle and vice versa).
Can somebody explain to me, why this is happening ?
Here is the fiddle: http://jsfiddle.net/w4gy8p1v/1/
Code for slider:
$(document).ready(function() {
$("#slider").slider({
min: 0,
max: 100,
step: 1,
values: [10, 90],
slide: function(event, ui) {
for (var i = 0; i < ui.values.length; ++i) {
$("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
}
}
});
$("input.sliderValue").change(function() {
var $this = $(this);
$("#slider").slider("values", $this.data("index"), $this.val());
});
});
<form>
<div>
<input type="text" class="sliderValue" data-index="0" value="10" />
<input type="text" class="sliderValue" data-index="1" value="90" />
</div>
<br />
<div id="slider"></div>
</form>
Code for second slider:
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
The difference comes from the range option (range: true).
When the range option is true, the slider handles can't cross.
I am using jquery slider. I have checked that jQuery and Jquery ui are loaded, but i get an error which is
TypeError: jQuery("#slider-range-min").slider
The code for slider is
jQuery(function() {
//var $jq = jQuery.noConflict();
jQuery( "#slider-range-min" ).slider({
range: "min",
value: 37,
min: 1,
max: 700,
slide: function( event, ui ) {
jQuery( "#amount" ).val( "jQuery" + ui.value );
}
});
jQuery( "#amount" ).val( "jQuery" + jQuery( "#slider-range-min" ).slider( "value" ) );
});
</script>
<p>
<label for="amount">Maximum price:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range-min"></div>
I have copied the code from jquery ui site, just replaced $ with jQuery. '$' is not loaded, so i have to use 'jQuery'.
The problem is related to the JQuery scripts libraries you've included . Some of them are either missing or not included correctly so make sure you've included these in <head></head> tag:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
i've got a problem with updating slider value from code. i have tried
$('#slider').slider('value', newValue);
$('#slider').val(newValue).slider();
$('#slider').val(newValue).slider('refresh');
and no result
any other suggestions
here is a sample code
Determines the value of the slider, if
there's only one handle. If there is
more than one handle, determines the
value of the first handle.
Code examples
Initialize a slider with the value option specified.
$( ".selector" ).slider({ value: 37 });
Get or set the value option, after init.
//getter
var value = $( ".selector" ).slider( "option", "value" );
//setter
$( ".selector" ).slider( "option", "value", 37 );
<html>
<input type="text" id="amount">
<input type="text" id="amount2">
<div id="slider-range"></div>
</html>
_
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 217,
values: [ 0, 217 ],
slide: function( event, ui ) {
$( "#amount" ).val( ui.values[ 0 ] );
$( "#amount2" ).val( ui.values[ 1 ] );
}
});
$("#amount").change(function() {
$("#slider-range").slider('values',0,$(this).val());
});
$("#amount2").change(function() {
$("#slider-range").slider('values',1,$(this).val());
});
});
</script>
https://jsfiddle.net/brhuman/uvx6pdc1/
Just call showSlider() which was in slider.js file wherever u want. It will automatically refresh.