Develop Reference

How to make this slider smoother?

Below is my slider code :
$("#slider").slider({
value: 100,
min: 0,
max: 500,
step: 50,
slide: function (event, ui) {
$("#slider-value").html(ui.value);
}
});
$("#slider-value").html($('#slider').slider('value'));
Is there any way to make the same slider smoother without any other tools using ?
Fiddle Link

See the step property, you can decrease it based on your needs to make it smoother.

jQuery UI slider to show images on drag

Need help on how to use this script to show images instead of values. I need 5 images to be shown when user drag handle. Like slideshow. Here is the slider code
http://jqueryui.com/slider/#steps
Also need to make fade effect on image swap.
This is what i got so far:
$("#slider").slider({
animate: true,
min: 0,
max: 500,
step: 100,
slide: function(event, ui) {
if (ui.value == 100) {
$('#green').hide();
};
if (ui.value == 200) {
$('#green').hide();
$('#red').show();
};
if (ui.value == 400) {
$('#red').hide();
$('#blue').show();
};
$("#hour").text(ui.value);
} });
http://jsfiddle.net/LGMHP/182/
Help would be greatly appreciates.

Jquery offers a fadein fadeout that could easily let you do what you need. It's the equivalent of show and hide, but with a fade. http://api.jquery.com/fadein/
You can set animation duration and add a function on complete. So instead of the show and hide you have, you can do something like:
$('#green').hide('fast', function(){$('#red').show('slow');});
That said, you'll have a problem handling sliding from right to left. To handle all cases, maybe you should use classes. And to push a bit further and simplify, you could work with attributes. Like this:
$("#slider").slider({
animate: true,
min: 0,
max: 500,
step: 100,
slide: function(event, ui) {
$('.showing').fadeOut(function(){$('[data-value='+ui.value+']').fadeIn().addClass('showing');}).removeClass('showing');
$("#hour").text(ui.value);
}
});
see jsfiddle: http://jsfiddle.net/m67Lz3u7/

Popup with value of slider when it's changed

I have the next jsfiddle:
https://jsfiddle.net/alonshmiel/vxz7fnvk/1/
There is a slider with an ellipse that contains arrows.
I want to write a function that shows a popup with the value of the ellipse when the user changes the value.
BUT: There are two options to scroll it:
1) When you click on a certain value, a popup with the value will be shown on the screen.
2) When you click on the ellipse and move it to the left or right, and then stop clicking on the ellipse (in other words, stop scrolling it), a popup with the value will be shown on the screen with the value.
$("#slider").slider({
value:30,
min: 0,
max: 100,
step: 10,
slide: function( event, ui ) {
$( "#slider a" ).html("<span class='Triangles'>◀▶</span>");
$( "#slider-value" ).html(ui.value);
}
});
Any help appreciated!

You want to bind to the stop event. It will fire when the user stops dragging or when the click at a different point on the slider.
This is your updated code:
$("#slider").slider({
value: 30,
min: 0,
max: 100,
step: 10,
slide: function (event, ui) {
$("#slider a").html("<span class='Triangles'>◀▶</span>");
$("#slider-value").html(ui.value);
},
stop: function (event, ui) {
alert(ui.value);
}
});
Working Fiddle: https://jsfiddle.net/vxz7fnvk/3/

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);
});

JQueryUI Slider - Tooltip for the Current Position

At the moment I have a slider and an small input text box which updates based on where you scroll on it.
Here is the javascript:
$("#slider").slider({
value: 500,
min: 0,
max: 1000,
step: 50,
slide: function(event, ui) {
$("#budget").val(ui.value);
},
change: function(event, ui) {}
});
$("#budget").val($("#slider").slider("value"));​
And here is the html/css:
<input type="text" id="budget" style="width:50px;text-align:center"/>
<div id="slider"></div>​
However it looks a bit odd having the small text box with the figure just at the top of the slider, so I would like it to update its horizontal position so it is above the handle of the slider (.ui-slider-handle) if possible - like a sort of tooltip.

I'm not sure if you need the input field or just a way to display the text, but you can show a tooltip like this jsFiddle example.
jQuery
var tooltip = $('<div id="tooltip" />').css({
position: 'absolute',
top: -25,
left: -10
}).hide();
$("#slider").slider({
value: 500,
min: 0,
max: 1000,
step: 50,
slide: function(event, ui) {
tooltip.text(ui.value);
},
change: function(event, ui) {}
}).find(".ui-slider-handle").append(tooltip).hover(function() {
tooltip.show()
}, function() {
tooltip.hide()
})​