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>

HTML Form Slider Group

I'm in need of a Slider Group, or something equivalent (I'm unsure of an official name).
Essentially, there's multiple sliders, and they all add up to 100%. By increasing one, you decrease the others.
I know that this problem has been solved already, as I've seen it used over at Humble Bundle, where you select where your donations go. Is there a library out there that does this?
If not, I'm fine with building something using jQuery-UI, or some other UI framework.

You can use jQuery UI sliders to do this pretty easily. Below is some pseudo code of the javascript you'll want to look into. The documentation does a pretty good job of covering how the events work:
API Documentation: http://api.jqueryui.com/slider/
JSFiddle: https://jsfiddle.net/b54dntrz/
HTML:
<div id="slider1"></div>
<br/>
<div id="slider2"></div>
JavaScript:
$(document).ready(function () {
$('#slider1').slider({
max: 100,
slide: function (event, ui) {
var slider2val = $('#slider2').slider('value');
if (ui.value + slider2val > 100) {
$('#slider2').slider({
value: slider2val - 1
});
}
}
});
$('#slider2').slider({
max: 100,
slide: function (event, ui) {
var slider1val = $('#slider1').slider('value');
if (ui.value + slider1val > 100) {
$('#slider1').slider({
value: slider1val - 1
});
}
},
});
})

Adding a plus "+" symbol to positive numbers in a JQuery output

I have a modified Jquery UI Slider Bar (-100 to +100). When the user moves the slider up and down the scale they receive visual feedback via a <div id="slider-result"></div>
Currently the slider-result displays the - symbol when the number is negative e.g. -47, but it does not display the + symbol when the number is positive e.g. 61
How can I make slider-result display the + symbol immediately before the number when it is positive?
I have looked at this question but when I try to integrate the solution it displays the + when the number is positive, but it stops displaying the number...
My Attempt
slide: function(event, ui) {
$("#slider-result").html(ui.value>0?'+':'') + ui.value;
Any helps is as always, much appriciated. Thanks
Edit - My complete code
$('#submit').click(function() {
var username = $('#hidden').val();
if (username == "") username = 0; //SHOULD THIS STILL BE 0?
$.post('comment.php', {
hidden: username
}, function(return_data) {
alert(return_data);
});
});
$(".slider").slider({
animate: true,
range: "min",
value: 0,
min: -100,
max: +100,
step: 1,
slide: function(event, ui) {
$("#slider-result").html(ui.value>0?'+':'') + ui.value;
//this updates the hidden form field so I can submit the data using a form
if($(this).attr("id") == "one")
$("#hidden1").val(ui.value);
}
});

You would have to include the + ui.value; inside of the parentheses as well:
$("#slider-result").html((ui.value>0?'+':'') + ui.value);
Since you only have the '+' or '' inside of the html() method, it will only put those values and not include the actual value.

You just need to put the ui.value inside the html function:
$("#slider-result").html(ui.value>0?'+' + ui.value:'' + ui.value);
jsFiddle example

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/