I have a jQuery slider. I have two buttons i.e ZoomIn and ZoomOut. I want to slide the slider on these button click. Like by clicking ZoomIn it should slide towards right and by clicking ZoomOut it should slide towards left, and should call their respective slide function/event too.
Working Demo Here
$(document).ready(function () {
$("#zoomSlider").slider({
min: -3.32,
max: 4.00,
step: 0.01,
value: 0.1,
animate: false,
"slide": function (event, ui) {
$("#zoom").val(ui.value + "%");
}
});
$("#zoom").val($("#zoomSlider").slider("value") + "%");
});
Updated
I also need a function to be called when slider changes. That function take two parameters 1)event 2)ui, how to get those parameteters when button click ? like :
$('#zoomIn').on('click', function () {
if (counter < 4.00) {//if counter less than max value
counter += .1;//increment counter
$slider.slider("value", counter)
$("#zoom").val($slider.slider("value") + "%");
myFunction(event, ui);
}
});
Please try this:
$(document).ready(function(){
$("#zoomIn").click(function (){
var current = $( "#zoom" ).val().slice(0,-1);
var new_position = (parseFloat(current)+0.1) ;
$("#zoom").val( new_position +"%");
$("#zoomSlider").slider('value',new_position);
$( "#zoom" ).val( $( "#zoomSlider" ).slider( "value" )+"%" );});
$("#zoomOut").click(function (){
var current = $( "#zoom" ).val().slice(0,-1);
var new_position_out = (parseFloat(current)-0.1) ;
$("#zoom").val( new_position_out +"%");
$("#zoomSlider").slider('value',new_position_out);
$( "#zoom" ).val( $( "#zoomSlider" ).slider( "value" )+"%" );});
});
Demo
Try
$(document).ready(function () {
var counter = 0, //initialize counter
$slider = $("#zoomSlider");
$slider.slider({
min: -3.32,
max: 4.00,
step: 0.01,
value: 0.1,
animate: false,
"slide": function (event, ui) {
$("#zoom").val(ui.value + "%");
counter = ui.value; //change counter value if user slides
}
});
$("#zoom").val($slider.slider("value") + "%");
counter = $slider.slider("value"); // set slider value in counter
$('#zoomIn').on('click', function () {
if (counter < 4.00) { //if counter less than max value
counter += .1; //increment counter
$slider.slider("value", counter)
$("#zoom").val($slider.slider("value") + "%");
}
});
$('#zoomOut').on('click', function () {
if (counter > -3.32) { //if counter greater than min value
counter -= .1; //decrement counter
$slider.slider("value", counter)
$("#zoom").val($slider.slider("value") + "%");
}
});
});
Demo http://jsfiddle.net/rbW35/5/
Example similar to what you want exists in official documentation. Slide event is only for mouse manipulation on slider, use change to capture slider changes. Here is fiddle
$(document).ready(function () {
var slider = $("#zoomSlider"),
counter = $("#zoom");
slider.slider({
min: -3.32,
max: 4.00,
step: 0.01,
value: 0.1,
animate: false,
change: function (event, ui) {
counter.val(ui.value.toFixed(2) + "%");
}
});
counter.val(slider.slider("value").toFixed(2) + "%");
$('[type="button"]').on('click', function (event) {
var el = $(event.currentTarget),
mult = el.data().negative ? 1 : -1;
slider.slider("value", slider.slider("value") + slider.slider("option", "step") * mult);
});
});
jsFiddle Example
We first get the current value of the slider. Then, we set the slider value to the current value minus one.
$('#zoomOut').click(function() {
var current_value = $('#zoomSlider').slider('option','value');
$("#zoomSlider").slider("value", current_value-=1);
});
If you want the have the slider animate as it's changing value, you can change the "animate" parameter to "true" in the creation of the slider.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
SO I found this jquery function: http://codepen.io/niklas-r/pen/HsjEv
html:
<p id="el">0%</p>
<button id="startCount">Count</button>
JS:
$("#startCount").on("click", function (evt) {
var $el = $("#el"),
value = 56.4;
evt.preventDefault();
$({percentage: 0}).stop(true).animate({percentage: value}, {
duration : 2000,
easing: "easeOutExpo",
step: function () {
// percentage with 1 decimal;
var percentageVal = Math.round(this.percentage * 10) / 10;
$el.text(percentageVal + '%');
}
}).promise().done(function () {
// hard set the value after animation is done to be
// sure the value is correct
$el.text(value + "%");
});
});
It increment numbers with animation. It doesnt work though, when I replace click with document.ready(). How do I make it work?
on document.ready there is no event so you can't do evt.preventDefault().
Here is a working example on document ready:
$(function() {
var $el = $("#el"),value = 56.4;
$({percentage: 0}).stop(true).animate({percentage: value}, {
duration : 2000,
easing: "easeOutExpo",
step: function () {
// percentage with 1 decimal;
var percentageVal = Math.round(this.percentage * 10) / 10;
$el.text(percentageVal + '%');
}
}).promise().done(function () {
// hard set the value after animation is done to be
// sure the value is correct
$el.text(value + "%");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<p id="el">0%</p>
Try using like this,
$(document).ready(function(){
$(document).on("click", "#startCount", function (evt) {
var $el = $("#el"),
value = 56.4;
$({percentage: 0}).stop(true).animate({percentage: value}, {
duration : 2000,
easing: "easeOutExpo",
step: function () {
// percentage with 1 decimal;
var percentageVal = Math.round(this.percentage * 10) / 10;
$el.text(percentageVal + '%');
}
}).promise().done(function () {
// hard set the value after animation is done to be
// sure the value is correct
$el.text(value + "%");
});
});
});
Include all of your code in $(document).ready to prevent script execution before page loading
$(document).ready(function(){
$("#startCount").on("click", function (evt) {
...
});
});
To activate on ready and on button click:
var cnt = function() {
var $el = $("#el"),value = 56.4;
$({percentage: 0}).stop(true).animate({percentage: value}, {
duration : 2000,
easing: "easeOutExpo",
step: function () {
// percentage with 1 decimal;
var percentageVal = Math.round(this.percentage * 10) / 10;
$el.text(percentageVal + '%');
}
}).promise().done(function () {
// hard set the value after animation is done to be
// sure the value is correct
$el.text(value + "%");
});
};
$(cnt);
$("#startCount").on("click", cnt);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<p id="el">0%</p>
<button id="startCount">Count</button>
I have the following script for a jQuery UI slider. The script shows the amount in a div with id #skizzar_payment_amount
When I scroll to the lowest amount (0), the value in the div shows the initial amount instead of 0.
See here:
<script>
jQuery(function($) {
var initialValue = 7.5;
var maxValue = 20;
var stepValue = 0.25;
var sliderTooltip = function(event, ui) {
var curValue = ui.value || initialValue; // current value (when sliding) or initial value (at start)
var tooltip = '<div class="tooltip"><div class="tooltip-inner">£' + curValue + '</div><div class="tooltip-arrow"></div></div>';
$('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
$("#skizzar_payment_amount").val(ui.value); //change amount in hidden input field
}
$("#slider").slider({
value: initialValue,
min: 0,
max: maxValue,
step: stepValue,
create: sliderTooltip,
slide: sliderTooltip,
});
$("#skizzar_payment_amount").val($("#slider").slider("value"));
});
</script>
https://jsfiddle.net/yzzvd52y/
ui.value will be 0, which is false in this line: var curValue = ui.value || initialValue;
Change it to e.g.:
var curValue = ui.value !== undefined ? ui.value : initialValue;
Updated fiddle
I updated your fiddle and added the following code:
change: function( event, ui ) {
$("#skizzar_payment_amount").val(ui.value);
}
Try this:
jQuery(function($) {
var initialValue = 7.5;
var maxValue = 20;
var stepValue = 0.25;
var sliderTooltip = function(event, ui) {
var curValue = ui.value >= 0 ? ui.value : initialValue; // current value (when sliding) or initial value (at start)
var tooltip = '<div class="tooltip"><div class="tooltip-inner">£' + curValue + '</div><div class="tooltip-arrow"></div></div>';
$('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
$("#skizzar_payment_amount").val(ui.value); //change amount in hidden input field
}
$("#slider").slider({
value: initialValue,
min: 0,
max: maxValue,
step: stepValue,
create: sliderTooltip,
slide: sliderTooltip,
change: function(event, ui) {
$("#skizzar_payment_amount").val(ui.value);
}
});
});
I have 3 Sliders in one JQuery Dialog, i want them to have a maximum value, but the maximum is not only for one slider it is for the sum of all of them. My script runs fine in google chrome debuger the only problem is that the value of the slider is not updated in $(this).slider("value", (sliderMax - sum));
$(".slider").each(function() {
var id = $(this).attr("id");
id = id.replace("Slider", "Value");
var sliderMax = 27;
$(this).slider({
range : "min",
min : 0,
max : sliderMax,
value : $("#" + id).attr("value"),
slide : function(event, ui) {
var sum = 0;
$(".sliderValue").each(function() {
if ($(this).attr("id") != id) {
sum += parseInt($(this).attr("value"));
}
});
if ((sum + $(this).slider("value")) > sliderMax){
$(this).slider("value", (sliderMax - sum));
}
$("#" + id).val(ui.value);
}
});
});
pls help me.
Ok finaly i found the solution:
if ((sum + ui.value) > sliderMax){
return false;
}
It is because of params of parseInt and value:... parseInt returns fake value when the string provided as parameter doesn't contain a number! please define the value variable outside the options as follows
$(".slider").each(function() {
var id = $(this).attr("id");
id = id.replace("Slider", "Value");
var sliderMax = 27;
var _value=$("#" + id).attr("value");
$(this).slider({
range : "min",
min : 0,
max : sliderMax,
value :value,
slide : function(event, ui) {
var sum = 0;
$(".sliderValue").each(function() {
if ($(this).attr("id") != id) {
var valueString=$(this).attr("value");
sum += parseInt(valueString);
}
});
if ((sum + $(this).slider("value")) > sliderMax){
$(this).slider("value", (sliderMax - sum));
}
$("#" + id).val(ui.value);
}
});
});
EDITS:
copied your solution to help readers
if ((sum + ui.value) > sliderMax){
return false;
}
I am trying to get a label to update when a user enters a value into a text box. I have managed to get the label to update when the slider bar value is changed by the user but i dont have the skill to get it to update when the text box changes.
I tried to write some code but it does not look right at all, can sombody lend me a hand?
Code i tried
$("#MonthlyRent").text({
textchange: function (event, ui) {
update(2, ui.value + '%'); //changed
}
});
Function to catch change
$(document).ready(function () {
$("#slider").slider({
range: "min",
animate: true,
value: 1,
min: 0,
max: 100,
step: 1,
slide: function (event, ui) {
update(1, ui.value + '%'); //changed
}
});
$("#slider2").slider({
range: "min",
animate: true,
value: 1,
min: 0,
max: 100,
step: 1,
slide: function (event, ui) {
update(2, ui.value + '%'); //changed
}
});
$("#MonthlyRent").text({
slide: function (event, ui) {
update(2, ui.value + '%'); //changed
}
});
//Added, set initial value.
$("#amount").val(0);
$("#duration").val(0);
$("#amount-label").text(0);
$("#duration-label").text(0);
$("MonthlyRent").text(0);
update();
});
update function
function update(slider, val) {
//changed. Now, directly take value from ui.value. if not set (initial, will use current value.)
var $amount = slider == 1 ? val : $("#amount").val();
var $duration = slider == 2 ? val : $("#duration").val();
var $rent = $("#MonthlyRent").val();
var $amount2 = $amount.replace('%', '');
/* commented
$amount = $( "#slider" ).slider( "value" );
$duration = $( "#slider2" ).slider( "value" );
*/
$total = "£" + ($amount2 + $rent);
$("#amount").val($amount);
$("#amount-label").text($amount);
$("#duration").val($duration);
$("#duration-label").text($duration);
$("#total").val($total);
$("#total-label").text($total);
$('#slider a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> ' + $amount + ' <span class="glyphicon glyphicon-chevron-right"></span></label>');
$('#slider2 a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> ' + $duration + ' <span class="glyphicon glyphicon-chevron-right"></span></label>');
}
Use the event change or keyup:
$('#mytextinput').on('change keyup', function (e) { /* You stuff here. */ })
Without HTML code, I guessed your input was something like <input type="text" id="mytextinput" />, but if it is not you should give more information.
To detect a change on a textbox use the following
http://jsfiddle.net/SrhYh/
$('#example').change(function() {
update();
});
function update() {
$('#result').text($('#example').val());
}
as an alternative listen to keyup
$('#example').keyup(function() {
update();
});
function update() {
$('#result').text($('#example').val());
}
http://jsfiddle.net/SrhYh/1/
I'm trying to get the value of the slider when value goes up or goes down.
$(document).ready(function() {
var valMap = [1,2,3,4,5,6,7,8,9,10];
var counter = null;
var slider = $( "#slider" ).slider({
disabled: false,
animate: true,
min: 0,
max: valMap.length-1,
values: [0],
slide: function( event, ui ) {
$( "#zomlevel" ).val(valMap[ui.values[0]] + "x");
slider.slider("option", "animate", "slow");
counter++;
if(counter increments){
alert("COUNTER INCREMENTS");
}
if(counter decrement){
alert("COUNTER DECREMENTS");
}
}
});
});
If i slide the slider to the right it should increment and if i slide the slider to the left it should decrement. how can i do that in slider?
Try something like
jQuery(function($){
var valMap = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var counter = null, value= 0;
var slider = $("#slider").slider({
disabled : false,
animate : true,
min : 0,
max : valMap.length - 1,
slide : function(event, ui) {
//$("#zomlevel").val(valMap[ui.values[0]] + "x");
slider.slider("option", "animate", "slow");
counter++;
},
change: function(){
var val = $(this).slider('value');
console.log(val, value)
if(value < val) {
console.log('incremented')
} else if(value > val){
console.log('decremented')
}
value = val;
}
});
});
Demo: Plunker