Develop Reference

How to toggle checkbox on slider?

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

jQueryUI slider - How to get the value [duplicate]

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

jQuery ui range slider gives wrong value

I use jQuery UI range slider for IE 9 and lower. With it I want to update the font size live.
My problem is that the range slider does not slide correctly. I cant get value 0 after 1. I also cant gate vaule 100 after 99.
function update() {
var Rvalue = $('#range-slider').slider('value');
$("#slidevalue").text(Rvalue);
};
$(function() {
$( "#range-slider" ).slider({
range:false,
min: 0,
max: 100,
value: 20,
slide: function( event, ui ) {
update();
}
});
});
Here is a jsFiddle

Your problem is your update function.
Try like this :
$(function() {
$( "#range-slider" ).slider({
min: 0,
max: 100,
value: 20,
slide: function( event, ui ) {
$( "#slidevalue" ).text( ui.value );
}
});
});

Dynamic HTML causes libraries to fail

I can't get this dynamically created content working with jQuery Slider and jscolor. The library functions are ignored. I'm guessing it's something to do with the order that things are processed in. Could someone point me in the right direction please?
Here's a simplified example of the failing code.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<title>Test dynamic code and jscolor</title>
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<script type="text/javascript">
function addcontent() {
document.getElementById('colordiv').innerHTML = '<input id="valColourRGB" class="color" />';
document.getElementById('sliderdiv').innerHTML = '<input type="text" class="p_slidernum" id="colT" name="valColourT" value="200" /><div id="colTslider"></div>';
}
$(function() {
$( "#colTslider" ).slider({
value: 100,
min: 0,
max: 255,
slide: function( event, ui) {
$( "#colT" ).val( ui.value );
}
});
});
</script>
</head>
<body onload="addcontent();">
<div id="colordiv"></div>
<div id="sliderdiv"></div>
</body>
If I manually move the INPUT tags into the DIVs it works fine, but why doesn't this work?

You have to call the slider after injecting the html.
http://jsfiddle.net/p46cs/
function addcontent() {
document.getElementById('colordiv').innerHTML = '<input id="valColourRGB" class="color" />';
document.getElementById('sliderdiv').innerHTML = '<input type="text" class="p_slidernum" id="colT" name="valColourT" value="200" /><div id="colTslider"></div>';
$( "#colTslider" ).slider({
value: 100,
min: 0,
max: 255,
slide: function( event, ui) {
$( "#colT" ).val( ui.value );
}
});
}
addcontent();

load will fire later than the DOMContentLoaded that jQuery's .ready() depends on (using $(function) is equivalent to that).
One way of fixing your code is removing onload from body (you should not use this method called inline event handlers anyway) and calling addContent like this:
$(function() {
addContent();
$( "#colTslider" ).slider({
value: 100,
min: 0,
max: 255,
slide: function( event, ui) {
$( "#colT" ).val( ui.value );
}
});
});

the jquery may be trying to assign the events before you load the content into dom. Try putting the call to addContent() in the ready method.
here is a bin
http://jsbin.com/eYaqoci/1/edit

window.onload will happen after jQuery's ready event, what that means is that:
$( "#colTslider" ).slider({
value: 100,
min: 0,
max: 255,
slide: function( event, ui) {
$( "#colT" ).val( ui.value );
}
will run before addContent(), meaning $('#colTslider') won't match any element.
(See http://learn.jquery.com/about-jquery/how-jquery-works/#Launching_Code_on_Document_Ready)
You can call addContent before you setup the slider in jQuery's ready event handler ($(function(){...}) and it should start working:
$(function(){
$('#colordiv').html('<input id="valColourRGB" class="color" />');
$('#sliderdiv').html('<input type="text" class="p_slidernum" id="colT" name="valColourT" value="200" /><div id="colTslider"></div>');
$( "#colTslider" ).slider({
value: 100,
min: 0,
max: 255,
slide: function( event, ui) {
$( "#colT" ).val( ui.value );
});
});

get spinner ui value on change

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