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()
})
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>
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.
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/
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 1.3.2 / jQueryUI 1.7 / Slider
$("#slider").slider({
range: "min",
min: 0,
max: 40,
value: 0,
slide: function(event, ui) {
CalculateOrder(event, ui);
}
});
it starts off just fine, but after I move the slider I can't get it back to 0, ui.Value is 1 when i slide it all the way to the left.
I've tried setting
min:-1
this sets the ui.Value to -1 when i slide it to -1, but when I'm at 0 the ui.Value is still 1.
Any ideas?
What you want is to get the value when the slider has stop, not during the slide. From my experience, the slide event will get you the previous position of the slider. Stop will give you the value of the slider where the user move it to.
$("#slider").slider({
range: 'min',
min: 0,
max: 40,
value: 1,
step: 10,
slide : function(event, ui){
console.log("previous value:"+ $(this).slider('option', 'value'));
},
stop: function(event, ui){
console.log("Current value:"+ $(this).slider('option', 'value'));
}
});