Develop Reference

Update global variable from jQuery event

Firstly, please note I am new to jQuery and have limited js experience, so this may be a silly question, but I have no one to ask for help.
I have a jQuery range slider which provides two year values. I have successfully created a variable which contains both the minimum and maximum year.
I am unsure how to update the min/max year variables after the user interacts with the range slider.
I need the the min/max year values as variables to use as a filter for a map/geojson query.
I have tried to declare the variable equal to ui.value(0) and ui.value[0], but that is as far as I have gotten. (example: yrmin = ui.value[0]; )
The only thing I know for certain is that I don't know enough. Any direction, comments, suggestions, or links to related exercises/ problems etc would be so incredibly helpful.
var yrmin = '';
var yrmax = '';
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 1900,
max: 2020,
values: [ 1945, 1995 ],
slide: function( event, ui ) {
$( "#amount" ).val( " " + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
}
});
$( "#amount" ).val( " " + $( "#slider-range" ).slider( "values", 0 ) +
" - " + $( "#slider-range" ).slider( "values", 1 ) );
yrmin = $("#slider-range").slider("values", 0);
yrmax = $("#slider-range").slider("values", 1);
});
When I use the the yrmin = ui.value(0); the console logs a ui not defined error..

You can use (window), but I do recommend to avoid the global approach as much as you can
window scope
window.yrmin = $("#slider-range").slider("values", 0);
window.yrmax = $("#slider-range").slider("values", 1);

Reverting a pixastic effect with jquery

$(function() {
$( "#slider" ).slider({
range: "min",
value: 2,
min: 0,
max: 5,
slide: function( event, ui ) {
// While sliding update the value
$( "#image" ).pixastic('blurfast', {amount:ui.value});
}
});
// Set the initial slider amount
var value = $( "#slider" ).slider( "value" );
$( "#image" ).pixastic('blurfast', {amount:value});
});
I've got multiple sliders for pixastic effects on an image. However every time the slider updates the image, I want it to revert the old effect and apply the new level of that effect rather than the effect accumulating each time. I'm aware of the revert function in the pixastic library, but I'm fairly new with jquery and unsure how to use it. How could I go about doing this?

$("#image").click(function(){
Pixastic.revert(document.getElementById('image'));
//apply your new effect.
});

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

jQuery UI Slider: Range with 3 handles, and configurable colors?

I would like a jQuery UI slider that has five differently colored ranges defined by three handles. (So the first range would be handle 0 - handle 1, and the second range would be handle 1 to handle 2.) Is this possible through configuration, or must I hack it? If I have to modify the source, is there any guidelines for how to go about doing that?
Update: What I'm looking for in terms of ranges is:
| --- color 1 ----- handle1 --------- color 2 ------------- handle2 ------- color3 --------- handle3 -----color 4 ----|
(hopefully that makes sense.)

The range option defined in the jquery ui slider documentation does indeed limit the slider to only 2 handles. You need to create several elements when the slider raises the 'slide' or 'change' event and set the position of these manually, this way you can create a slider with multiple handles and multiple ranges which you can apply custom css to. See fiddle for a working example.
http://jsfiddle.net/AV3G3/3/

You probably want to use a range slider and pass in an array of 3 values to create 3 handles (according to the docs):
The slider widget will create handle
elements with the class
'ui-slider-handle' on initialization.
You can specify custom handle elements
by creating and appending the elements
and adding the 'ui-slider-handle'
class before init. It will only create
the number of handles needed to match
the length of value/values. For
example, if you specify 'values: [1,
5, 18]' and create one custom handle,
the plugin will create the other two.

If you don't insist on jQuery UI, noUiSlider can give ranges different classes and supports multiple handles - just as you ask. This example demonstrates how to color the ranges.

Modified with onclick reset,please find the complete code.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Slider functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<style>
.slide {
margin-top: 20px;
margin-left: 20px;
width: 400px;
background: red;
}
.slide-back {
position:absolute;
height:100%;
}
</style>
</head>
<body>
<!-- HTML -->
<button class="button">submit</button>
<p>
<label for = "price">Price range:</label>
<input type = "text" id = "price"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id = "slider-3"></div>
</body>
<script>
var doUpdate = function(event, ui) {
$('#slider-3 .slide-back').remove();
$($('#slider-3 a').get().reverse()).each(function(i) {
var bg = '#fff';
if(i == 1) {
bg = 'red';
} else if(i == 2) {
bg = 'yellow';
} else if(i == 3) {
bg = 'green';
}
$('#slider-3').append($('<div></div>').addClass('slide-back').width($(this).offset().left - 5).css('background', bg));
});
};
$(".button").click(function(){
$('#slider-3').slider({
slide: doUpdate,
change: doUpdate,
min: 0,
max: 100,
values: [ 10, 30, 20],
slide: function( event, ui ) {
$( "#price" ).val( ui.values[ 2 ] );
}
});
$( "#price" ).val( $( "#slider-3" ).slider( "values", 0 )
);
doUpdate();
});
$('#slider-3').slider({
slide: doUpdate,
change: doUpdate,
min: 0,
max: 100,
values: [ 10, 30, 20],
slide: function( event, ui ) {
$( "#price" ).val( ui.values[ 2 ] );
}
});
$( "#price" ).val( $( "#slider-3" ).slider( "values", 0 ) );
doUpdate();
</script>
</html>

Parameterizing max value of a jQuery ui slider

I'm trying to create this slider
http://jqueryui.com/demos/slider/#rangemax
Is it possible to parametrize the max value?
For ex:
$("#slider-range-max").slider({
range: "max",
min: 1,
max: maxValue,
value: 2,
slide: function(event, ui) {
$("#amount").val(ui.value);
}
});
Is it possible to pass maxValue value, when I click on something? After its been initialized? Not on document ready function, but even after that?

You can set the values at any time, for max you'd do this:
$("#slider-range-max").slider("option", "max", newValue);
You can see how to do this with all the options at the jQuery UI site. Here's an example:
$(".increaseMax").click(function() {
var currentMax = $("#slider-range-max").slider("option", "max");
$("#slider-range-max").slider("option", "max", currentMax + 1);
});

According to the page you gave in your question (click on Options and then max):
Get or set the max option, after init.
//getter
var max = $( ".selector" ).slider( "option", "max" );
//setter
$( ".selector" ).slider( "option", "max", 7 );
Change 7 to any value/variable you want to set the new maximum value to.