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
});
}
},
});
})
Related
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>
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'm new to jquery and javascript, but I am looking to do what I think should be a relatively simple task. I want to use the UI Slider widget to control certain actions. Get to value 100, show an image. Get to value 200, destroy the previous image, play a new animation (or show an image). This is what I have written so far: http://jsfiddle.net/LGMHP/14/
Am I going about this completely the wrong way?
Looks like you were missing some dollar signs in front of your jQuery variables. Try:
$("#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();
};
$("#hour").text(ui.value);
}
});
jsFiddle example.
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.
I'm trying to figure out from the jQuery example here whether it's possible to set the current value of the slider as text that appears on the slider knob.
So, as the user changes the slider, the new value would continually update as a number value displayed as text on the surface of the slider knob in real time.
$(document).ready(function() {
$("#slider").slider();
});
<div id="slider"></div>
Is there a way to do that?
#EvilMM's answer is almost right but s/he forgot the quotes and I've also experienced the slider value being -1 so I wrote in a fix for that.
<div id="slider"></div>
js:
$("#slider").slider({
max: 10,
slide: function (event, ui) {
m_val = ui.value;
if (m_val < 0) {
m_val = 0;
$(this).slider({ value: 0 });
}
$(this).find("a:first").text(m_val);
}
});
Lets say your slider is called "slider", just like in you example:
<div id="slider" class="slider"></div>
Then, inside this div, there is a generated link-tag (a) that represents the knob.
So you could try something like that:
$(document).ready(function() {
$("#slider").slider(
slide: function(event, ui){
$("#slider").find(a:first).text(ui.value);
}
);
});
This should write the current value on the knob while sliding.
What you now have to do, is to play around with the css to format the knob.
I hope this will help a little bit.
If you are using Jquery UI
$(function(){
var slider = $('#slider1').bxSlider({
onBeforeSlide: function(currentSlide, totalSlides){
alert(currentSlide);
}
});
Done!