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.
Related
I have a Jquery ui slider with multiple handles that i can add and remove, i want to show a tooltip above the handle while moving it, this is the code i created:
var tooltip = $('<div id="tooltip" />').css({
position: 'absolute',
top: -25,
left: -10
}).hide();
var values = [10, 50, 70, 90];
var val = 20;
//add handle to the slider
$('button').bind('click', function(e) {
e.preventDefault();
$(".slider").slider("destroy");
values.push(val);
values = values.sort();
$(".slider").slider({
min: 0,
max: 100,
steps: 1,
values: values
})
})
//create the slider
$(".slider").slider({
min: 0,
max: 100,
steps: 1,
values: values,
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()
});
//remove slider handle on double click
$(document).on('dblclick', '.ui-slider-handle', function() {
if ($('.ui-slider-handle').length > 2)
$(this).remove();
//alert($(this)[0].style.left);
})
Jsfiddle example
As you can see in the example the tooltip works fine but it doesn't appear in the right position, and also it doesn't work with newly created handles.
Please can someone help me with this
Thank you
First issue: bind is deprecated, use on
When you destroy the slider you remove also the tooltip!
Therefore, on button click, before destroying the slider you need to preserve a copy of your tooltip (jQuery.clone()) so you can reuse it again.
In order to simplify everything you may use a slider create function.
In order to solve the last issue (...but it doesn't appear in the right position) you need to change this line of code:
tooltip.text(ui.value);
to:
$(this).find('div').text(ui.value);
The snippet:
function createSlider(tooltip, values) {
$(".slider").slider({
min: 0,
max: 100,
steps: 1,
values: values,
slide: function(event, ui) {
$(this).find('div').text(ui.value);
},
change: function(event, ui) {}
}).find(".ui-slider-handle").append(tooltip).hover(function() {
$(".ui-slider-handle").find('div').hide()
$(this).find('div').show();
});
}
var tooltip = $('<div id="tooltip" />').css({
position: 'absolute',
top: -25,
left: -10
}).hide();
var values = [10, 50, 70, 90];
var val = 23;
$('button').on('click', function(e) {
e.preventDefault();
//
// preserve tooltip
//
tooltip = $('#tooltip').clone();
$(".slider").slider("destroy");
values.push(val);
values = values.sort();
createSlider(tooltip, values);
})
createSlider(tooltip, values);
$(document).on('dblclick', '.ui-slider-handle', function() {
if ($('.ui-slider-handle').length > 2)
$(this).remove();
//alert($(this)[0].style.left);
})
body {
margin-top: 80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div class="slider"></div>
<br>
<button>Click it!</button>
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); }
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);
});
I have this demo.
The value only updates if I refresh the page, but my idea is to update the value when the pointer is moved.
I use this plugin but I think that is based on the jQuery UI slider.
In my code I have:
<script type="text/javascript">
$(function(){
$("#SliderSingle").slider({
from: 400,
to: 2000,
step: 2.5,
round: 1,
scale: ['400€', '600€', '800€', '1000€', '1200€', '1400€',
'1600€', '1800€', '2000€'],
dimension: ' €',
skin: "round",
slide: function(event, ui){
$("#amount").val('$' + ui.value);
}
});
$("#amount").val('$' + $("#SliderSingle").slider("value"));
});
</script>
The only issue is just update the value when pointer is moved.
I don't think this is built on the jQueryUI slider. However, you should be able to use the callback option, which accepts a value parameter:
$("#SliderSingle").slider({
/* Snip */
callback: function(value) {
$("#amount").val("$" + value);
}
/* Snip */
});
Working example: http://jsfiddle.net/HKhBH/
I am trying to display the value of the slider inside the drag handle (slider). Any resouce provided is much appreciated. I am using jQuery 1.5.1
Thanks
Are you using jQuery UI Slider ?
If so, this is a solution :
$("#slider").slider({
change: function() {
var value = $("#slider").slider("option","value");
$("#slider").find(".ui-slider-handle").text(value);
},
slide: function() {
var value = $("#slider").slider("option","value");
$("#slider").find(".ui-slider-handle").text(value);
}
});
jsFiddle example here
Just wanted to add a little to the answer.
If you are setting an initial value, or you would like the text to appear on the handle before the slide method is called you will need to add the document ready bit at the bottom, but i have also condensed the code a little
// take value from event, ui.value
$("#slider1").slider({
slide: function (event, ui) {
$("#slider").find(".ui-slider-handle").text(ui.value);
}
});
// sets text initially to value of slider, even if a default value is set
$(document).ready(function() {
var value = $("#slider").slider("option","value");
$("#slider").find(".ui-slider-handle").text(value);
});
Thx all, I have solution for jQuery ui slider with value on drag different handles.
Example for 2 handles:
$("#wt-altitude-range").slider({
range: true,
min: 0,
max: 3000,
values: [ 100, 2500 ],
slide: function(event, ui) {
$(ui.handle).text(ui.value);
}
});
Work for slide event.
ui.handle - current handle, ui.value - current value.