How to toggle checkbox on slider? - javascript

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

Related

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

Get value while dragging the slide

How do I get the value of the slide while I drag the slide?
I tried but it did not work:
$("#slider").slider({
slide : function() {
alert($("#slider").val());
}
});
As written here, to get the value you need to use stop and not slide to get the value after interaction is stopped
$( "#slider" ).slider({
stop: function( event, ui ) {
alert($(this).val());
}
});
here is a jsfiddle

Changing class of a div using jquery ui slider

<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/

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

Categories

Resources