I have a simple slider UI and I want to get the value as it changes dynamically, but I can't seem to make it work. I have:
<script type="text/javascript">
$(function() {
$( "#slider" ).slider({
value:0,
min: 0,
max: 24,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value + " hrs");
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) + " hrs" );
});
});
</script>
and...
<p>
<label for="amount">Time (1hr increments):</label>
<input type="text" id="amount" />
</p>
<div id="slider"></div>
And to check I have it working I am using:
$("#slider").change(function() {
alert($("#slider").val());
});
But no joy. Sorry if I am being overly dumb! Any help would be much appreciated.
Try this instead change() method:
$("#slider").bind("slidechange", function(event, ui) {
alert(ui.value);
});
Have you tried with the jQuery 'on' method?
$('#slider').on('change', function() {
alert($('#slider').val());
});
Related
I am using the code bellow to use the Jquery UI Slider.
<script>
$(function() {
$( "#slider" ).slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
</script>
How can add multiple sliders with a button? I want to add slider elements when I click the button bellow.
<div id="adding"></div>
And how can I control them? This single slider has a jQuery code to work...
$("#adding").click(function() {
$("<div>").slider({
// options
}).appendTo("#sliderContainer");
});
I have a form with random filters and a slider that adjusts the width/height of items.
How can I save the slider value once the form is submitted so that when I go back to the slider, I see the value I left it on?
My attempt:
<input type="text" id="amount" name="slider_id" value="<?php if (isset($_POST['slider_id'])){ echo $_POST['slider_id']; }?>">
<div id="slider"></div>
The Javascript:
$(function() {
$( "#slider" ).slider({
value:$("input[name='slider_id']").val(), min: 80, max: 400, step: 10,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value-70 + "%" );
$('.display').css('width', ui.value + 'px');
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "%" );
});
Right now it will show NaN after the form is submitted. All help is much appreciated!
Looks to me that the problem is in php value set.
Just modify the value of the input before calling the slider.
$(function () {
var newVal = $('input').val().replace("%","");
$('input').val(newVal);
$("#slider").slider({
value: $("input[name='slider_id']").val(),
min: 80,
max: 400,
step: 10,
slide: function (event, ui) {
$("#amount").val(ui.value - 70 + "%");
$('.display').css('width', ui.value + 'px');
}
});
$("#amount").val($("#slider").slider("value") + "%");
});
http://jsfiddle.net/joeSaad/hZCDZ/#base
Your problem is here: $("input[name='slider_id']").val()
Debug it and you'll find that it's some form of "nn%", thus, a string.
$.slider requires that value be numeric.
You need to parse it somehow:
value: parseInt($("input[name='slider_id']").val().replace('%', ''), 10)
I have this fiddle http://jsfiddle.net/48Hpa/ , it calculates the sum automatically when I enter the keyword by myself, when I change the slider, the textbox value changes, but I don't see the sum. Why is this? How can I make this work? Thank you very much.
$(document).ready(function(){
$(function() {
$( "#slider1" ).slider({
range: "min",
value: 36,
min: 1,
max: 36,
slide: function( event, ui ) {
$( ".amount1" ).val( ui.value);
}
});
$( ".amount1" ).val($( "#slider1" ).slider( "value" ));
});
$(function() {
$( "#slider2" ).slider({
range: "min",
value: 50000,
min: 1,
max: 50000,
slide: function( event, ui ) {
$( ".amount2" ).val( ui.value );
}
});
$( ".amount2" ).val( $( "#slider2" ).slider( "value" ));
});
function writesum() {
var months = $('.amount1').val();
var credits = $('.amount2').val();
var payment = Number(months) + Number(credits);
$('.amount3').val(payment);
}
$(".amount1").on('input',function(){
jQuery(writesum);
});
$(".amount2").on('input',function(){
jQuery(writesum);
});
});
How about just calling writesum() whenever the slider moves?
i.e. http://jsfiddle.net/48Hpa/1/
You need to trigger a change event on the input fields when you change their value with code.
Also, I suggest using the change event.
$( "#slider1" ).slider({
...
slide: function( event, ui ) {
$( ".amount1" ).val( ui.value)
.trigger('change');
}
});
$( "#slider2" ).slider({
...
slide: function( event, ui ) {
$( ".amount2" ).val( ui.value )
.trigger('change');
}
...
$(".amount1, .amount2").on('change', function() {
writesum();
});
I'm pretty new to jquery, but this is question. From my code below I have made 3 sliders each within a tag. Each of the three has an input field that is changed when the slider is moved to show the current value of the slider (simple jQueryUI plugin sliders). The final line involves another plugin that links all the sliders together so that they all add to 100 total and move when the others move.
The problem I'm having is that when I slide one, its value changes and shows but the others do not. I can get all of the values to change with some extra lines of code, but I don't know how to get (this) ui.value so that I can display the separate values for each of the sliders.
You can see in the third slider I tried to get it to do that, but the way it is set it only takes the same ui.value of the current slider being moved.
Can anyone help me with a solution to get (this) ui.value of the other sliders when i need to change it?
($(function() {
$( "#RedSlider" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 1,
animate: true,
slide: function( event, ui ) {
$( "#RedValue" ).val( ui.value );}
});
$( "#RedValue" ).val( $( "#RedSlider" ).slider( "value" ) );
});
$(function() {
$( "#BlueSlider" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 1,
animate: true,
slide: function( event, ui ) {
$( "#BlueValue" ).val( ui.value );}
});
$( "#BlueValue" ).val( $( "#BlueSlider" ).slider( "value" ) );
});
$(function()
{
$( "#EmptySlider" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 98,
animate: true,
slide: function( event, ui )
{
$( "#EmptyValue" ).val( ui.value );
$( "#RedValue").val(ui.value);
$( "#BlueValue").val(ui.value);
}
});
$( "#EmptyValue" ).val( $( "#EmptySlider" ).slider( "value" ) );
$( "#RedValue").val($("RedSlider)").slider("value"));
$( "#BlueValue").val($("RedSlider)").slider("value"));
});*/
$('div:gt(2)').slider().linkedSliders({policy: 'last'});
Your code will only every be executed once. You need to change the following line:
$( "#BlueValue" ).val( $( "#BlueSlider" ).slider( "value" ) );
To be something different when selecting the value of your slider at whatever time you need it.
This code:
$( "#BlueValue" ).val( $( "#BlueSlider" ).slider( "value" ) );
will only execute once. You need to have that in a value-changed callback for the slider, so the value will be updated continually.
I'm implementing a Slider with JQuery and I have the following problem.
The function is called upon load and it generates a slider with the Id from the div-element:
$(function() {
$( "#slider" ).slider({
value: 0,
min: 0,
max: 10,
step: 1,
slide: function( event, ui ) {
$( "#value" ).val(ui.value );
}
});
$( "#value" ).val( $( "#slider" ).slider( "value" ) );
});
<div id="slider" >
I would rather have it called upon loading and pass the object -something like this:
function createSilder(object) {
object.slider({
value: 0,
min: 0,
max: 10,
step: 1,
slide: function( event, ui ) {
$( "#value" ).val(ui.value );
}
});
$( "#value" ).val( $( "#slider" ).slider( "value" ) );
}
<div id="slider" onload="createSlider(this)">
Is this possible?
Have you tried your code?
There is probably no problem, it just depends on the way the plugin has been coded.
Just be careful to pass the jQuery object : <div id="slider" onload="createSlider($(this));">.