Develop Reference

jquery-ui slider bounded to select list using numbers greater then 100 strange behaviour

Probably most stupid question ever, but it is really annoying, the code compiles well and work great with range numbers 0 to 100, however, I cannot figure out why my slider control stop working when I use numbers greater than 100 ... I'm using simple jquery-ui sample
and all looks good, but soon as change numbers greater then 100 (due to our requirements we want to use it for years), the select list stop changing the dates and slider doesn't move ... Does it support numbers greater then 100 or there is some limitations ?! js code I'm using:
$(function() {
var select = $( "#minbeds" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 100,
max: 1000,
step: 100,
range: "min",
create: function( event, ui ) {
setSliderTicks(event.target);
},
value: select[ 0 ].selectedIndex + 1,
slide: function( event, ui ) {
select[ 0 ].selectedIndex = ui.value - 1;
}
});
$( "#minbeds" ).change(function() {
slider.slider( "value", this.selectedIndex + 1 );
});
});
function setSliderTicks(el) {
var $slider = $(el);
var max = $slider.slider("option", "max");
var min = $slider.slider("option", "min");
var spacing = 100 / (max - min);
$slider.find('.ui-slider-tick-mark').remove();
for (var i = 0; i < max-min ; i++) {
$('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) + '%').appendTo($slider);
}
}
and here is HTML:
<form id="reservation">
<select name="minbeds" id="minbeds">
<option>100</option>
<option>200</option>
<option>300</option>
<option>400</option>
<option>500</option>
<option>600</option>
<option>700</option>
<option>800</option>
<option>900</option>
<option>1000</option>
</select>
</form>
And some CSS styles for tick-marks:
.ui-slider-tick-mark{
display:inline-block;
width:2px;
background:grey;
height:16px;
position:absolute;
top:-1px;
}
Can anyone please let me know, what is wrong with it, and in case if there are some limitations, can anyone recommend me some other library to use (open source), with the same functionality, taking input from html (select list) and with tick-marks/labels available ?! Any help appreciated ! Thank you.

The problem is that you simply copy pasted the example and expect it to work without understanding how it works even though you have a different requirement.
The demo is using selectedIndex property directly because the values are ranging from 1-6 and the slider steps by one. Your values and steps are different so if you want to find the option to select by index, you should divide the slider value by step value which is 100 and subtract 1 (since the options index is 0 based). Similarly if you want to set the slider value based on selected option index, you should increment it by 1 and multiply by 100.
Instead of doing all that you can simply use the selected options value and slider value directly like:
$(function() {
var select = $("#minbeds");
var slider = $("<div id='slider'></div>").insertAfter(select).slider({
min: 100,
max: 1000,
step: 100,
range: "min",
value: 100,
slide: function(event, ui) {
select.val(ui.value);
}
});
$("#minbeds").change(function() {
slider.slider("value", this.value);
});
});
<link href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<form id="reservation">
<select name="minbeds" id="minbeds">
<option>100</option>
<option>200</option>
<option>300</option>
<option>400</option>
<option>500</option>
<option>600</option>
<option>700</option>
<option>800</option>
<option>900</option>
<option>1000</option>
</select>
</form>

Jquery ui slider change automatically on manual input

This is the code for my jquery ui slider:
var slidervalue = 100;
$(function () {
$( "#slider" ).slider({
range: "min",
value: 100,
min: 1,
max: 700,
slide: function( event, ui ) {
$( "#amount" ).val(ui.value );
slidervalue = ui.value;
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) );
});
And this is a extra the function i have created to fetch a number from my deal title and calculate savings and display the result.
function updateSlider() {
$.each($('.coupontitle'),function(index,coupObj){
if ($(coupObj).text().match(/(\d+)\%/i))
{
var percent = $(coupObj).text().match(/(\d+)\%/i);
var savings = ((percent[1]*.01) * slidervalue).toFixed(0);
$('span',coupObj).html('Save: $'+savings);
}
else if ($(coupObj).text().match(/\$(\d+)/i))
{
var percent = $(coupObj).text().match(/\$(\d+)/i);
var savings = ((percent[1]*.01) * 100).toFixed(0);
$('span',coupObj).html('Save: $'+savings);
}
});
}
this code is working properly along with the slider. right now, when a user slides the slider the amount corresponding to the slider is passed using ui.value and is passed to the above function and is calculated.
But, when i input a value into the text box manually, i want the slider to move automatically, and i want that value to pass into the function to calculate. Right now, when a amount is entered manually, the input value is not passed into the function.
I want the slider to work as this site: http://www.chippmunk.com/
I came across this jsfiddle, which does the work, but when manually entered it is not passing the text box value into my function to carry on with the calculation.
jsfiddle - http://jsfiddle.net/andrewwhitaker/MD3mX/

The accepted answer above is very useful and it works fine for single value sliders. But someone like me might wonder how to control two values in Range Slider.
So, if we use range slider, we need to pass an array as values and for range slider we can handle it like this
var min_val = 0;
var max_val = 1000;
function minMaxControl(type) {
if (type == 'min') {
min_val = $('#min').val();
} else if (type == 'max') {
max_val = $('#max').val();
}
$("#slider-range").slider('values', [min_val, max_val]);
}
$("#slider-range").slider({
range: true,
min: 0,
max: 1000,
values: [min_val, max_val],
slide: function(event, ui) {
$("#min").val(ui.values[0]);
$("#max").val(ui.values[1]);
}
});
You can see the full code and demo here. https://jsfiddle.net/N4K1B/2tv9phke/1/
So basically in above answer the single parameter of the slider was controlled like this:
$("#slider").slider("value",this.value);
And for range slider instead of passing a single value we are passing an array of two values like this:
$("#slider-range").slider('values', [min_val, max_val]);
Hope this answer may help someone if someone is still using jquery-ui slider.
For more, please refer to the documentation

This will work, I would move the $-sign out of the input though.
http://jsfiddle.net/Rusln/MD3mX/847/
$("#slider").slider({
range: "min",
value: 1,
step: 1000,
min: 0,
max: 5000000,
slide: function (event, ui) {
$("input").val(ui.value);
}
});
$("input").change(function () {
$("#slider").slider("value",this.value);
});
UPDATE
http://jsfiddle.net/Rusln/KLj6Z/
$("#slider").slider({
range: "min",
value: 1,
step: 1,
min: 0,
max: 100,
slide: function (event, ui) {
$("input").val(ui.value);
}
});
$("input").on("keyup",function(e){
$("#slider").slider("value",this.value);
});

Set margin-left buffer on both sides of jquery slider

I'm using a jquery slider and my slider handle is pretty big. In order for it to be the way I want it has to have margin-left: -2px when it's at 0 (all the way to the left) and have margin-left: -32px when it's at 100 (all the way to the right).
I want to ease into the correct margin rather than setting it upruptly. It can be done using the slide event but I'm having a little trouble with the calculation:
$(...).slider({
slide: function(event, ui){
var newMarginLeft = ...calculation... (ui.value is 0-100)
$(this).children(".ui-handle").css("marginLeft", newMarginLeft);
}
});

You can use this function, which will generate numbers from 2 to 32 evenly:
function generateNum(num)
{
return 2 + Math.floor(num * .30);
}
Than you will just add a negative onto it. Use like this:
$(...).slider({
slide: function(event, ui){
var newMarginLeft = "-" + generateNum(ui.value);
$(this).children(".ui-handle").css("marginLeft", newMarginLeft + "px");
}
})
jsFiddle here: http://jsfiddle.net/RWuR4/1/
You can also try using Math.round to round up: Here is a fiddle that uses Math.round, which makes 99 also return 32 (so it might be a bit more of what you want instead of Math.floor):
http://jsfiddle.net/RWuR4/2/

Jquery multiple sliders interconnected

I try to set 3 jquery ui slider interconnected, the sum of the 3 sliders must always stay at 100, so when I change the value for one slider, the others slider must be updated.
In exemple, if one slider have a value of 40 and I raise this value to 50, the two others slider have to decreased by 5.
Can anyone help me please?
thanks'

the probability of high value is 50 in any case... so set all the three sliders to 0 to 50... and their class as class="selector inactive"
$(".selector").slide(function(event, ui){
$(event.srcElement).removeClass('inactive');
var valuechange = 0;
$('.inactive').each(function(value, item){
// get sum of other two sliders
valuechange += $(item).slider( "option", "value");
});
// subtract sum(othertwo) + this value with 100 to get current changed value
valuechange = (valuechange + (ui.values[0])) - 100;
$('.inactive').each(function(value, item){
// add other sliders values to changedvalue / 2
$(item).slider( "option", "value", $(item).slider( "option", "value") + (( valuechange / 2) * -1));
});
$(event.srcElement).toggleClass('inactive');
});
hope this solved your problem

jQuery UI Slider: Range with 3 handles, and configurable colors?

I would like a jQuery UI slider that has five differently colored ranges defined by three handles. (So the first range would be handle 0 - handle 1, and the second range would be handle 1 to handle 2.) Is this possible through configuration, or must I hack it? If I have to modify the source, is there any guidelines for how to go about doing that?
Update: What I'm looking for in terms of ranges is:
| --- color 1 ----- handle1 --------- color 2 ------------- handle2 ------- color3 --------- handle3 -----color 4 ----|
(hopefully that makes sense.)

The range option defined in the jquery ui slider documentation does indeed limit the slider to only 2 handles. You need to create several elements when the slider raises the 'slide' or 'change' event and set the position of these manually, this way you can create a slider with multiple handles and multiple ranges which you can apply custom css to. See fiddle for a working example.
http://jsfiddle.net/AV3G3/3/

You probably want to use a range slider and pass in an array of 3 values to create 3 handles (according to the docs):
The slider widget will create handle
elements with the class
'ui-slider-handle' on initialization.
You can specify custom handle elements
by creating and appending the elements
and adding the 'ui-slider-handle'
class before init. It will only create
the number of handles needed to match
the length of value/values. For
example, if you specify 'values: [1,
5, 18]' and create one custom handle,
the plugin will create the other two.

If you don't insist on jQuery UI, noUiSlider can give ranges different classes and supports multiple handles - just as you ask. This example demonstrates how to color the ranges.

Modified with onclick reset,please find the complete code.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Slider functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<style>
.slide {
margin-top: 20px;
margin-left: 20px;
width: 400px;
background: red;
}
.slide-back {
position:absolute;
height:100%;
}
</style>
</head>
<body>
<!-- HTML -->
<button class="button">submit</button>
<p>
<label for = "price">Price range:</label>
<input type = "text" id = "price"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id = "slider-3"></div>
</body>
<script>
var doUpdate = function(event, ui) {
$('#slider-3 .slide-back').remove();
$($('#slider-3 a').get().reverse()).each(function(i) {
var bg = '#fff';
if(i == 1) {
bg = 'red';
} else if(i == 2) {
bg = 'yellow';
} else if(i == 3) {
bg = 'green';
}
$('#slider-3').append($('<div></div>').addClass('slide-back').width($(this).offset().left - 5).css('background', bg));
});
};
$(".button").click(function(){
$('#slider-3').slider({
slide: doUpdate,
change: doUpdate,
min: 0,
max: 100,
values: [ 10, 30, 20],
slide: function( event, ui ) {
$( "#price" ).val( ui.values[ 2 ] );
}
});
$( "#price" ).val( $( "#slider-3" ).slider( "values", 0 )
);
doUpdate();
});
$('#slider-3').slider({
slide: doUpdate,
change: doUpdate,
min: 0,
max: 100,
values: [ 10, 30, 20],
slide: function( event, ui ) {
$( "#price" ).val( ui.values[ 2 ] );
}
});
$( "#price" ).val( $( "#slider-3" ).slider( "values", 0 ) );
doUpdate();
</script>
</html>