I'm using the jQuery UI slider for a casino game project I am working on. I need to be able to change the "max" value based upon the players current bankroll. At first, the slider works correctly, it sets the "max" slider value to 1000, the players starting bankroll. Bust as the 'currentBankroll' variable changes, the sliders "max" value does not update. I inserted a console.log() line of code to check the value of the variable 'currentBankroll', which confirms the value is changing, but the slider "max" value stays at the initial value of 1000 and does not update. To further confuse me, I tried a solution I found here to change the "max" value.
$('#slider-range-max2').slider("option", "max", 300);
This line of code will change the sliders "max" value if I put a number in it (like 300), but will not work if I use a variable (like 'currentBankroll"). How can I change the sliders value using a variable?
$(function() {
console.log("Current Bankroll: " + currentBankroll);
$("#slider-range-max2").slider({
range: "max",
max: 0,
min: 1,
max: currentBankroll,
value: 2,
slide: function( event, ui ) {
$("#amount").val( ui.value );
sliderValue = (ui.value);
},
slide : function(event, ui) {
skillLevelSlots(ui.value);
wagerAmount = (ui.value);
$('.wager').html("$" + wagerAmount);
}
});
$('#slider-range-max2').slider("option", "max", 300);
});
Right - you are defining your slider at a certain time and using currentBankroll to set max value. This is the value when the slider is created but this doesnt change unless you re create it. To get it to change, whenever your currentBankroll changes you could call a function that changes the value.
function currentBankrollChange(currentBankroll){
$('#slider-range-max2').slider("option", "max", currentBankroll);
}
or when a players bankroll changes you could call:
$('#slider-range-max2').slider("option", "max", currentBankroll);
Related
I have a webpage whereby when I create the jQuery sliders, the max is set to 100
Each slider is then set to have a value and when the page first loads, each slider has max to be the value of value
function initSliders() {
$(".slider").slider({
range: "min",
min: 0,
max:100,
create: function(event, ui) {
var classname = $(this).attr('id');
$(this).slider("value", $(',' + className).val());
$(this).slider("option", "max", $(',' + className).val());
}
})
}
This works fine as when the page is loaded, each slider is looped through
If I amend one slider, the function is called again and only the changed slider is processed. All the others return to a max of 100
How can I set all sliders to have the max option the same as the value
So instead of max:100 when creating, max:value
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);
});
Using HTML & JavaScript
I created a slide bar which successfully responds both ways with a select option.
However i have choosen to 'hide' the select option box. I was wondering if anyone could give me any tips on creating labels for the slider bar as the user now has no idea what they are selecting. Examples i have found show perfect indicators, milestone numbers and floating numbers when hovering over yet everything is slide bar related and rather than labels. Help!
My JavaScript Slider Bar Code
$(function() {
var select = $( "#logbytes");
var slider = $( " <div id='slider'></div>").insertAfter(select).slider({
min: 1,
max: 6,
step: 1,
value: select[0].selectedIndex + 1,
slide: function(event, ui) {
select[0].selectedIndex = ui.value - 1;
}
});
$('#logbytes').after(slider).hide();
});
The basic idea is to wrap your slider inside a wrapper div. Then to add another div inside the wrapper. Its text will be the current value of the slider.
And then the only thing left to do is to move that div around and to update it's text. It's something like:
slide: function(event, ui) {
$( ".amount" ).text( ui.value );
$( ".amount" ).css("margin-left",(ui.value-min)/(max-min)*100+"%");
}
Where min and max are the min and max of your slider.
See http://jsfiddle.net/WYdLF/ for an 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.