$(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.
});
Related
I'm developing an APP using jquery mobile with phonegap. Have a trouble when trying to retrieve the value of a slider, for some reason I can't take it, i've got something like
$(document).ready(function() {
var iValue = 0;
$("#sliderVer").uislider({
min : 10,
max : 100,
orientation : "vertical",
step : 1,
value : iValue
});
$("#incomplete_field_correo").hide();
$("#incomplete_field_secret").hide();
$("#incorrect_field_correo").hide();
});
I've tried with
$("sliderVer").value;
also
$("sliderVer").slider( "value" );
and
$("sliderVer").slider( ui.slider );
But nothing seems to work, any idea?
thanks in advance!
Get or set the value option, after initialization:
// getter
var value = $( ".selector" ).slider( "option", "value" );
// setter
$( ".selector" ).slider( "option", "value", 10 );
http://api.jqueryui.com/slider/#option-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.
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.