Im trying to enable the slider when the checkbox is checked!
the html:
<label for="zerovalueback">Zero Back</label>
<input id="zerovalueback" type="checkbox" name="zerovalueback">
<div id="slider"></div>
<div class="sliderValues">
<span class="leftVal">
</span>
= = =
<span class="rightVal">
</span>
</div>
the script:
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('body').on('click', '#zerovalueback', function() {
var status = jQuery(this).prop("checked"); console.log(status);
if (status == 'true') {
jQuery( "#slider" ).slider({
range : "max",
min : 1,
max : 10,
value : 6,
slide: function(event,val){
jQuery('.leftVal').text(val.value);
}
});
};
});
});
Everything is linked correctly, because If I call simply the slider before the on(click) function it works.
Does anybody have idea how to solve this?
The if statement was not correct, advice from #DontVoteMeDown was helpfull,
it should be
if (status === true) {
jQuery( "#slider" ).slider({
range : "max",
min : 1,
max : 10,
value : 6,
slide: function(event,val){
jQuery('.leftVal').text(val.value);
}
});
}
If your need is to enable disable jQuery. There are methods called enable() and disable(). you can find more info here.
To disable slider you can use jQuery( "#slider" ).slider('disable'); and to enable slider you can use jQuery( "#slider" ).slider('enable')
You can find the working demo here
Related
I'm using jquery slider , If I slide the slider,In slide function
I will test certain scenario . If the scenario is not satisfied the slider should be positioned back to its original position .
For example :
The current slider value is 1 and the user slide it to value 2, in slide: function (event, ui) function I'm checking the condition if not satisfied the value of the slider should be reverted back to value 1 .
So that I have used the code in else part
$("#slider").slider({ value: parseFloat(return_slider_value) });
$("#slider").slider('value', 1);
It is not setting back the value 1 still it shows the value 2 in the slider.
My requirement is the value of slider value should be dynamically changed .
var slider_Value = $.trim(data.details.merchant_table_booking_hours);
if (slider_Value == '')
{
slider_Value = 0;
}
var return_slider_value = slider_Value;
$("#slider").slider({
value: slider_Value,
min: 0,
max: 12,
step: 0.5,
slide: function (event, ui)
{
var selected_button_count = 0;
$(".time_slot_buttons").each(function ()
{
if(this.attr('selected-id')==0)
{
selected_button_count = parseInt(selected_button_count)+1;
}
});
if (selected_button_count>0)
{
if (parseFloat(ui.value) != 0)
{
$("#slider-value").val(ui.value);
$("#show-slider-hrs").html(ui.value + " hrs ");
} else
{
$("#slider-value").val('');
$("#show-slider-hrs").html('');
}
}
else
{
alert("Please Select a Floor And Timing Buttons" + return_slider_value);
$("#slider-value").val(return_slider_value);
$("#show-slider-hrs").html(return_slider_value + " hrs ");
$("#slider").slider({ value: parseFloat(return_slider_value) });
$("#slider").slider('value', 1);
}
}
})
Thanks in advance .
As you will see from the API documentation on jQuery UI Slider (http://api.jqueryui.com/slider/), the slider can be read and set the following way, after initialization:
// Getter
var value = $( ".selector" ).slider( "option", "value" );
// Setter
$( ".selector" ).slider( "option", "value", 10 );
EDIT:
The answer might possibly depend on the value that you return to the slide event.
Consider this code.
$(function() {
$("#slider").slider({
value: 1,
min: 0,
max: 12,
step: 0.5,
slide: function(event, ui) {
//Evaluate condition
var condition = false; //or true
if (!condition)
return false; //Canceling the event will prevent the handle from moving and the handle will continue to have its previous value.
else
return true;
}
});
});
Full example here.
Canceling the slide event will prevent the handle from moving and the handle will continue to have its previous value.
i have a problem with jquery slider value after changing it.
I'm just using normal jquery UI (version 1.10.4) and jquery core 1.7.2
First time after refresh i have a value which i want. But after the change i can't get it. And i need that to have a if statemnet which will change a value of the paragraph.
This is a JQuery code:
$(function() {
$( "#slider" ).slider({
range:"min",
min: 0,
max: 100,
value: 10,
slide: function wynik( event, ui ) {
$( "#price" ).val("$" + ui.value);
}
});
$( "#price" ).val( "$" + $( "#slider" ).slider( "value") );
var val = $('#slider').slider("value");
if ( val >= 20 ) {
$("#priceText").text("first text");
} else {
$("#priceText").text("second text");
}
});
What is wrong here?
I want to change a text in label:
<p>
<input type="text" id="price">
<label id="priceText" for="price">Some text to change</label>
</p>
Input working correctly and show the value all the time in right way. But label doesn't change (only first time after refresh).
I have read a lot of posts on SO before i post this one. For example:
How to get value from jQuery UI slider? or How to get value from input with dynamically changed value by jquery UI slider?
But i can't get it done anyway.
You can try this:
$("#selector").change(function() {
$("#slider-range").slider('values',0,$(this).val());
});
Working Fiddle
Jquery Slider emit a "slidechange" event everytime it change value
Remember, it should be listened on the jQuery element after you've registered the event in the element itself
$( "#slider" ).slider({
change: function( event, ui ) {
// register event here
}
});
$( "#slider" ).on( "slidechange", function( event, ui ) {
// use ui.value to get the current value
} );
Check the official api wiki for all the slider related events
Official Slider Api
I've set up a JQuery UI range slider with controls, although when clicking on the controls the value sent to a select dropdown is not updated. How could I fix this?
var gmin = 0;
var gmax = 500;
var s = $( "#slider" ).slider({
value:5,
min: gmin,
max: gmax,
step: 100,
slide: function( event, ui ) {
$( "#select span" ).html(ui.value);
}
});
$('#down').click(function() {
s.slider('value', s.slider('value') + s.slider( "option", "step" ) );
});
$('#up').click(function() {
s.slider('value', s.slider('value') - s.slider( "option", "step" ) );
});
View JSFiddle
You need to use the change event, not slide here. slide() only catches manual user slides, not programmatic ones:
var s = $( "#slider" ).slider({
value:5,
min: gmin,
max: gmax,
step: 100,
change: function( event, ui ) {
$( "#select span" ).html(ui.value);
}
});
(Any reason your down button makes it go up and vice versa?)
Since this event wont store value for this element, besides here is workaround:
http://jsfiddle.net/nrNX8/514/
You have to add
$('#select span').text(s.slider('value'));
It may be useful for any element you want to set in any update.
You just need to add this line to the click functions:
$( "#select span" ).html(s.slider('value'));
...on #up and #down listeners.
However, it seems that Ivan's answer is a better approach than mine
I have an image on a web page, and want to change it based on the position of a slider, I have looked through a few answers on here but nothing quite covers it for the way I need it to work.
So far i have a functioning slider, and an image but i cant get them to talk to each other:
HTML:
<img src="images/flask_image1.png" alt="Isa lab" id="flask" />
Slider HTML:
<div id="slider1">
Script:
<script>
$(function() {
$( "#slider1" ).slider({
min: 0,
max: 4,
step: 1,
change: function(event, ui){
if(ui.value == 1){
$('flask').attr('src','images/flask_image2.png');
}else{
$('flask').attr('src','images/flask_image1.png');
};
}
});
});
</script>
Basically does nothing.
I'm not a JS or JQ user much, so i'm stuck!
Change $('flask') to $('#flask')
Just change $('flask') to $('#flask')
Working Example: http://jsfiddle.net/4WEML/1/
The problem is you mention id with out the hash "#"
Like below
$('flask').attr('src','images/flask_image2.png');
this wont work as because thats a id you should use hash '#' so try like below code
$(function() {
$( "#slider1" ).slider({
min: 0,
max: 4,
step: 1,
change: function(event, ui){
if(ui.value == 1){
$('#flask').attr('src','images/flask_image2.png');
}else{
$('#flask').attr('src','images/flask_image1.png');
};
}
});
});
Hope this helps....
$('flask').attr('src','images/flask_image2.png');
You need to add a # before hand to refer to an element with an ID of flask
if(ui.value == 1){
$('#flask').attr('src','images/flask_image2.png');
}else{
$('#flask').attr('src','images/flask_image1.png');
};
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());
});