Develop Reference

unable to return result using jquery

I'm using jquery UI's slider and i want to return the results from multiple sliders so I can performs a calculation.
this is what i have so far but I'm struggling to get any results from out side the function.
$(function() {
var x
$("#slider4").slider({
value: 1,
min: 0,
max: 50,
step: 5,
slide: function(event, ui) {
$("#items").val("$" + ui.value);
x =$("#items").val("$" + ui.value);
}
});
$("#items").val("$" + $("#slider4").slider("value"));
console.log(x) // this doesnt update the console with the slider value
});
Ideally outside the function i would want to add multiple slider results similar to below.
var z = x * y;

To get the value of the slider outside of the slide handler you can either retrieve the value of #items (as you update that within the slide handler):
var sliderValue = $('#items').val();
Or you can read the value from the slider() directly:
var sliderValue = $('#slier4').slider('option', 'value');
Also, note that you do not need to append empty strings when setting val():
$("#slider4").slider({
value: 1,
min: 0,
max: 50,
step: 5,
slide: function(event, ui) {
$("#items").val(ui.value);
}
});

The value does not magically keep updating the textbox, you need to write code that updates the value when the slider value changes. So add a change event
change: function( event, ui ) { $("#items").val(ui.value); }

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

tooltip is shown after the 2nd hover

I have a problem, I'm trying to add a tooltip to some already rendered elements. The code that I have makes the tooltip appear after the 2nd hover which is kind of normal because on the first one is not set yet, do you know what can I do to have it displayed from the first hover?
Thanks in advance!
I have the following code:
$(".checkWidth").live("mouseenter",function() {
var size = measureText($(this).text(), 12, 'Tahoma')
var limit = $('#my_container').width() - 67;
if( size.width > limit){
$(this).attr('title', $(this).text());
$('#tiptip_content').css('font-size', '13px');
$(this).tipTip({
maxWidth: "auto",
defaultPosition: "right",
fadeIn: 100,
fadeIn: 100,
attribute: "title"
});
}
});

Calling $(this).tipTip({...}); sets up the tooltip, it doesn't show it. So you don't actually set up the tooltip until you mouseover the element, and the tooltip is shown the next time you mouse over (handled by the plugin).
You'll need to call that on DOM ready. I think you may need something like this:
$(document).ready(function () {
$('#tiptip_content').css('font-size', '13px');
var limit = $('#my_container').width() - 67;
$('.checkWidth').each(function () {
var size = measureText($(this).text(), 12, 'Tahoma');
if (size.width > limit) {
$(this).attr('title', $(this).text());
$(this).tipTip({
maxWidth: "auto",
defaultPosition: "right",
fadeIn: 100,
fadeIn: 100,
attribute: "title"
});
}
});
});
Edit another possibility:
$('#tiptip_content').css('font-size', '13px'); //this should be able to be done elsewhere...
$("document").on("mouseenter", '.checkWidth', function () {
var $this = $(this);
if ($this.data('tipInit') === true) { return; }
$this.data('tipInit', true);
var size = measureText($(this).text(), 12, 'Tahoma')
var limit = $('#my_container').width() - 67;
if (size.width > limit) {
$this.attr('title', $this.text());
$this.tipTip({
maxWidth: "auto",
defaultPosition: "right",
fadeIn: 100,
fadeIn: 100,
attribute: "title"
});
$this.trigger('mouseenter');
}
});

it depends on your code structure. But I will try the following:
Try changing the .live() to .on()
I would try to change the function to .on('hover', function)
I would also try to use mousenter and mouseleave

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()
})​

Jquery UI slider how to make a box follow the handler?

I am trying to create a div that should follow the handler as it is seen here:
http://m1.dk/Priser/#tab:#calc,#abb
My JSfiddle: http://jsfiddle.net/z3xV3/2/
I also want to make a calculation on the UI value that should appear in the box.
Here is a illustration what I want to achieve:
HTML:
<div id="slider"></div>
<input id="sliderValue" />
Jquery:
$(document).ready(function() {
// Pris slider
$("#slider").slider({value:'',min: 0,max: 150,step: 1, range: 'min',
slide: function( event, ui ) {
$( "#amount" ).html( ui.value + ' timer');
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});

I hope that's the effect you're looking for: http://jsfiddle.net/z3xV3/11/
JS
$(document).ready(function() {
$("#slider").slider({value:'', min: 0, max: 150, step: 1, range: 'min'});
var thumb = $($('#slider').children('.ui-slider-handle'));
setLabelPosition();
$('#slider').bind('slide', function () {
$('#sliderValue').val($('#slider').slider('value'));
setLabelPosition();
});
function setLabelPosition() {
var label = $('#sliderValue');
label.css('top', thumb.offset().top + label.outerHeight(true));
label.css('left', thumb.offset().left - (label.width() - thumb.width())/ 2);
}
});
HTML
<div id="slider"></div>
<input id="sliderValue" />
CSS
#sliderValue {
position:absolute;
width: 50px;
}
Best regards!

I have modifiered your jsfiddle example: http://jsfiddle.net/Dr5UR/
$("#amount").val("$" + $("#slider").slider({
slide: function(event, ui) {
$('#sliderValue').css('left', event.clientX).val(ui.value);
}
}));
I make use of the slide event of the slider.
The slide event got two arguments:
event
This object contains several informations about the event itself. The time of triggering, the key which has been pressed or the coordinates of the mouse at the moment of triggering. The clientX property contains the position we need to set to the moving object.
ui
The ui object comes from jQuery UI itself. It basicly just contains the value. Additionally it contains the anchor which is used for dragging too. But you can't use its position, cause the slide event takes effect before the anchor takes its new position.
The #slideValue input needs to have position: absolute;, cause I work with the left position attribute in CSS. You could also set the margin-left value, without need to set the position to absolute.

It's actually quite easy (and very useful) to turn this into a simple jQuery plugin. Like so:
JSFiddle: http://jsfiddle.net/PPvG/huYRL/
Note that I've added support for moving the slider by entering a value into the #sliderValue.
[ Code sample removed ]
You could also choose to remove #sliderValue from the HTML and let the plugin create it for you. In that case, you would rewrite the plugin so it would be called on the slider, instead of on #sliderValue. In my opinion, that would be a much neater solution.
Update
Based on your comments (and re-reading your question), I've rewritten the plugin example.
If I understand correctly, you want to do some calculations based on the value of the slider and display the result of those calculations in the label below the slider handle. The following should make that really easy.
JSFiddle: http://jsfiddle.net/PPvG/q5qg7/
HTML
<div id="slider"></div>
Plugin
(function($) {
$.fn.sliderLabel = function(options) {
var settings = $.extend({
marginTop: 2,
// Margin between the slider handle and the label (in pixels)
callback: function(value) {
return 'Value: ' + value;
}
}, options);
return this.each(function() { // <- maintains chainability
var slider = $(this);
var handle = slider.children('.ui-slider-handle');
var data = slider.data('sliderLabel');
if (handle.length === 0) {
// $(this) isn't a slider (it has no handle)
console.log('[SliderLabel] Error: sliderLabel() can only be called on a slider.');
return;
}
if (data === undefined) {
// First time sliderLabel() is called on this slider
data = {
label: $('<div class="ui-slider-label" />').css('position', 'absolute'),
callback: settings.callback
};
data.label.insertAfter(slider);
function updateLabel() {
var value = slider.slider('value');
var labelText = data.callback(value);
data.label.html(labelText);
data.label.css('top', handle.offset().top + handle.outerHeight() + settings.marginTop);
data.label.css('left', handle.offset().left - ((data.label.width() - handle.width()) / 2));
}
updateLabel();
slider.bind('slide', updateLabel);
} else {
// sliderLabel() was called before; just update the callback:
data.callback = settings.callback;
updateLabel();
}
// Save (or update) the data inside the slider:
slider.data('sliderLabel', data);
});
}
})(jQuery);
Usage
$("#slider").slider();
$("#slider").sliderLabel({
callback: function(value) {
return value + '%';
}
});
As you can see, the plugin is now called on the slider itself. You can now provide the plugin with a callback, which allows you to do some calculations and return a correctly formatted label (HTML is allowed).
In the example above, the callback simply takes the value that is passed to the callbackand appends '%'.

Here is a working example for a slider with two handles
$('#slider').slider({
range: true,
min: 500,
max: 10000,
step: 100,
values: [1000, 2000],
slide: function( event, ui ) {
$('#min-price').html('$' + ui.values[0]);
$('#min_budget').val(ui.values[0]);
$('#max-price').html('$' + ui.values[1]);
$('#max_budget').val(ui.values[1]);
}
//move labels when handles are moved
moveValueLabels();
}
});
//move the value labels directly under the handles
function moveValueLabels() {
var pos_first_handle = $('.ui-slider-handle:first').position();
var pos_last_handle = $('.ui-slider-handle:last').position();
$('#min-price').css('left', (pos_first_handle.left - ($('#min-price').width()/2)));
$('#max-price').css('left', (pos_last_handle.left - ($('#max-price').width()/2)));
}
//set initial positioning of labels when page is loaded
moveValueLabels();
CSS:
#slider {
overflow: visible;
#min-price {
position:absolute;
top:20px;
font-weight: bold;
padding:0;
}
#max-price {
position:absolute;
top:20px;
font-weight: bold;
padding:0;
}
}

HTML:
<div id="slider"></div>
CSS:
#slider {
width: 200px;
}
#sliderValue {
position: absolute;
left: 0;
bottom: -30px;
width: 40px;
}
jQuery:
$("#slider").slider({
value: '',
min: 0,
max: 100,
range: 'min',
create: function (event, ui) {
$('.ui-slider-handle').append('<input id="sliderValue" />');
},
slide: function (event, ui) {
$("#sliderValue").val(ui.value);
}
});
http://jsfiddle.net/yBfTy/4/

It would be nice to take a look at alternative solutions with jQuery plugins such as:
http://craigsworks.com/projects/qtip2/demos/#ui-slider
http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

Taking your jsfiddle.
HTML:
<div id="slider"></div>
<input id="sliderValue" />
CSS:
#sliderValue{width:50px;}
Jquery:
$(document).ready(function() {
// Pris slider
$("#slider").slider({value:'',min: 0,max: 150,step: 1, range: 'min',
slide: function( event, ui ) {
$( "#sliderValue" ).val( ui.value + ' timer');
var offset = $(this).find('a').css("left");
$("#sliderValue").css("margin-left", offset);
}
});
$( "#sliderValue" ).val($( "#slider" ).slider( "value" ));
});

You can just: http://jsfiddle.net/z3xV3/21/
$(document).ready(function() {
$("#slider").slider({
value:0,
min: 0,
max: 150,
step: 1,
range: 'min',
slide: function( event, ui ) {
var offsetLeft = $(this).find(".ui-slider-handle").offset().left;
$( "#sliderValue" )
.val( ui.value + ' timer')
.css({
"position": "absolute",
"left": offsetLeft
});
}
});
});
The slide callback is called every time you move your handle:
offsetLeft is the offset of the handle.
$( "#sliderValue" ) is your input.