How could get the value of a spinner when the value is changing with the button up and down?
<input type="text" id="spinner1" value="1" onchange="selFirt()" readonly>
<script>
$("#spinner1").spinner({min: 1, max: 5});
function selFirt(){
$('#spinner1').spinner().change(function(){
alert($(this).spinner('value'));
});
}
</script>
$('input[name*="name"]').spinner({
min: 0,
max: 100,
spin: function(event, ui) {
$(this).change();
}
});
SEE HERE
try the following :
$(function () {
var spinner = $("#spinner").spinner({
step: 2 ,
spin: function( event, ui ){
handleSpinnerValue(ui.value);
}
});
});
function handleSpinnerValue(txtValue)
{
//do here whatever you want with the value;
alert(txtValue);
}
Related
I have a simple JQuery Ui slider that contains hidden checkbox inside. I need to add the ability to toggle slider and thus change checkbox value.
How can I do this?
Codepen example.
HTML
<div style="margin-top: 50px"></div>
<div class="col-md-1">
<div id="slider">
<input type="checkbox">
</div>
</div>
JS
$(function() {
$( "#slider" ).slider({
step : 99,
animate : 'slow'
});
});
You can check and uncheck by moving the slide like this
$(function() {
$( "#slider" ).slider({
min: 0,
max: 1,
animate : 'slow',
slide: function( event, ui ) {
if(ui.value > 0){
$("#slider input[type='checkbox']").prop("checked", true);
} else {
$("#slider input[type='checkbox']").prop("checked", false);
}
}
});
});
So you need to exam the value when the slider stops. This can be done like so:
$(function() {
$("#slider").slider({
step: 99,
animate: 'slow',
stop: function(e, ui) {
if (ui.value > 0) {
$("#slider input[type='checkbox']").prop("checked", true);
}
}
});
});
The value will be either 0 or 100. So when the slider is to the right, it's at 100% value or some value. It will be more than 0, so that's what we check for.
See more about this event function: http://api.jqueryui.com/slider/#event-stop
I am working on http://gamercity.info/ymusic/.
And I am using UI slider as seek bar.
While the video is played I want to invoke a seekTo(seconds) function if user clicked anywhere on the seek bar. How to get new value of seconds after click event?
To read slider value/percentage value at anytime:
var val = $('#slider').slider("option", "value");
$('#slider').slider({
change: function(event, ui) {
alert(ui.value);
}
});
http://jqueryui.com/demos/slider/
I checked all the answers mentioned above, but found none useful as the following code:
$('#slider').slider("values")[0]; // for slider with single knob or lower value of range
$('#slider').slider("values")[1]; // for highest value of range
Tested with jQuery v2.1.1 and jQuery-ui v1.12.1
var val = $("#slider").slider("value");
$("#slider").slider(
{
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
$( "#slider-value" ).html( ui.value );
}
}
);
JS FIDDLE EXAMPLE : http://jsfiddle.net/hiteshbhilai2010/5TTm4/1162/
you can have a function like this
function seekTo(seek_value)
{
$("#slider").slider('option', 'value',seek_value);
}
var value=document.getElementById('slider').value;
var a=value.split("specialName")//name=special charcter between minimum and maximum rang
var b=a[0];//this will get minimum range
var c=a[1];//this will get maximum range
// Price Slider
if ($('.price-slider').length > 0) {
$('.price-slider').slider({
min: 0,
max: 2000,
step: 10,
value: [0, 2000],
handle: "square",
});
}
$(document).ready(function(){
$(".price-slider").on( "slide", function( event, ui ) { console.log("LA RECTM"); var mm = $('.tooltip-inner').text(); console.log(mm); var divide = mm.split(':'); console.log( "min:" +divide[0] + " max:" + divide[1] ) } );
})
You can pass the value to any function or set any element with the value:
$(function () {
$('#slider').slider({
max: 100,
slide: function (event, ui) {
$('#anyDiv').val(ui.value);
}
});
});
Late to the party but this question has still unanswered.
Below example will show you how to get value on change in an input field to save in DB:
$( "#slider-videoTransparency" ).slider({
value: "1",
orientation: "horizontal",
range: "min",
max: 30,
animate: true,
change: function (e, ui) {
var value = $(this).slider( "value" );
$('.video_overlay_transparency').val(value);
}
});
<div id="slider-videoTransparency" class="slider-danger"></div>
<input type="hidden" name="video_overlay_transparency" class="video_overlay_transparency" value="">
JQuery ui slider
var slider = $("#range_slider").slider({
range: true,
min: 0,
max: 500,
values: [0, 500],
slide: function(event, ui) {
var x = ui.values[0];
var y = ui.values[1];
$('#min').text( ui.values[0] )
$('#max').text( ui.values[1] )
$.ajax({
url: '/search',
type: 'GET',
dataType: 'script',
data: {min:x, max:y,term:food_item_name},
success: function(repsonse){},
});
}
});
});
<div id="slider" align="center" style="width:50%;margin-left:20%;" >
</div>
<div id="1" class="res1" style="margin:10px auto">
</div>
<script>
$(function() {
$( "#slider" ).slider({
animate:"fast",
value:0,
min: 0,
max: 50,
step: 25,
slide: function( event, ui ) {
if(($("#1").hasClass('res1'))&& (ui.value=25)){
$(".res1").toggleClass('res1 res2');
}
else if(($("#1").hasClass('res2'))&& (ui.value=50)){
$(".res2").toggleClass('res2 res3');
}
else if(($("#1").hasClass('res2'))&& (ui.value=50)){
$(".res2").toggleClass('res2 res3');
}
}
});
});
</script>
I have to change the class of div having id "1" to "res2"(initial class of div is 'res1') when ui.slider value is 25 and to class "res3" when the ui.slider value is 50.I used the above code.But I couldnt get the output as desired.Please help
Try
$(function () {
var classes = {
0: 'res1',
25: 'res2',
50: 'res3'
}
$("#slider").slider({
animate: "fast",
value: 0,
min: 0,
max: 50,
step: 25,
slide: function (event, ui) {
$("#1").removeClass().addClass(classes[ui.value])
}
});
});
Demo: Fiddle
try this:
if ($("#1").hasClass('res1') && (ui.value = 25)) {
$("#1").removeClass('res1').addClass('res2');
} else if ($("#1").hasClass('res2') && (ui.value = 50)) {
$("#1").removeClass('res2').addClass('res3');
}
Try this $("#1").addClass("res2");
For full documentation please read http://api.jquery.com/addClass/
I want to create a button with a event which occurs when a user clicked on it.
If someone has clicked this button a slider shows up.
I want a function if no one release this slider div the div toggles after 5 seconds, but if someone releases the slider nothing must happen!
I have created a fiddle in hope someone can fix this?
http://jsfiddle.net/84nVQ/50/
function handler1() {
clearTimeout(time);
$('#volumeChange').attr("class", "selected");
$('#volume-slider').slider({
orientation: 'horizontal',
value: 100,
max: 1,
step: 0.01,
animate: true,
slide: function(e, ui) {
alert(ui.value);
}
}).show();
}
function handler2() {
time = setTimeout(function() {
$('#volumeChange').attr("class", "");
$('#volume-slider').toggle();
$('#volume-slider').clearTimeout(time);
}, 5000);
}
function handler3() {
clearTimeout(time);
}
$("#volumeChange").on({
click: function(e) {
handler1();
$('#volume-slider').mouseleave(handler2).mouseenter(handler3);
}
});
There were two errors: undefined time variable and clearTimeout. This code should work
var time = null;
function handler1() {
clearTimeout(time);
$('#volumeChange').attr("class", "selected");
$('#volume-slider').slider({
orientation: 'horizontal',
value: 100,
max: 1,
step: 0.01,
animate: true,
slide: function(e, ui) {
movie.volume = ui.value;
}
}).show();
}
function handler2() {
time = setTimeout(function() {
$('#volumeChange').attr("class", "");
$('#volume-slider').toggle();
clearTimeout(time);
}, 5000);
}
function handler3() {
clearTimeout(time);
}
$("#volumeChange").on({
click: function(e) {
handler1();
$('#volume-slider').mouseleave(handler2).mouseenter(handler3);
}
});
This is in reference to the question previously asked
The problem here is, each slider controls the other. It results in feedback.
How do I possibly stop it?
$(function() {
$("#slider").slider({ slide: moveSlider2 });
$("#slider1").slider({ slide: moveSlider1 });
function moveSlider2( e, ui )
{
$('#slider1').slider( 'moveTo', Math.round(ui.value) );
}
function moveSlider1( e, ui )
{
$('#slider').slider( 'moveTo', Math.round(ui.value) );
}
});
This is sort of a hack, but works:
$(function () {
var slider = $("#slider");
var slider1 = $("#slider1");
var sliderHandle = $("#slider").find('.ui-slider-handle');
var slider1Handle = $("#slider1").find('.ui-slider-handle');
slider.slider({ slide: moveSlider1 });
slider1.slider({ slide: moveSlider });
function moveSlider( e, ui ) {
sliderHandle.css('left', slider1Handle.css('left'));
}
function moveSlider1( e, ui ) {
slider1Handle.css('left', sliderHandle.css('left'));
}
});
Basically, you avoid the feedback by manipulating the css directly, not firing the slide event.
You could store a var CurrentSlider = 'slider';
on mousedown on either of the sliders, you set the CurrentSlider value to that slider,
and in your moveSlider(...) method you check whether this is the CurrentSlider, if not, you don't propagate the sliding (avoiding the feedback)
You could just give an optional parameter to your moveSlider1 and moveSlider2 functions that, when set to a true value, suppresses the recursion.
A simpler approach which is kind of a hybrid of the above answers:
var s1 = true;
var s2 = true;
$('#slider').slider({
handle: '.slider_handle',
min: -100,
max: 100,
start: function(e, ui) {
},
stop: function(e, ui) {
},
slide: function(e, ui) {
if(s1)
{
s2 = false;
$('#slider1').slider("moveTo", ui.value);
s2 = true;
}
}
});
$("#slider1").slider({
min: -100,
max: 100,
start: function(e, ui) {
},
stop: function(e, ui) {
},
slide: function(e, ui) {
if(s2)
{
s1 = false;
$('#slider').slider("moveTo", ui.value);
s1 = true;
}
}
});
});
Tried this now and all answers do not work possibly due to changes to jquery ui.
The solution of Badri works if you replace
$('#slider').slider("moveTo", ui.value);
with
$('#slider').slider("option", "value", ui.value);