Im trying to make multiple jquery sliders that dynamically create a span with the value, but I am getting an instance of the value for each slider.
take a look at the fiddle http://jsfiddle.net/houareau/RvSgj/182/
or
var a = 0;
$(".slider").each(function() {
var slider = this;
$(slider).slider({
value : 5,
min : 1,
max : $(this).data('max'),
step : 1,
slide : function (event, ui) {
a = ui.value;
$(slider).next().find('span.sliderValue').html(ui.value);
}
});
});
Yay, here is the new fiddle!
$(".slider").slider({
min: 0,
max: $(this).data('max'),
step: 1,
create: function (event, ui) {
$(event.target).find('a').append( $('<span />').addClass('sliderValue') )
},
slide: function (event, ui) {
$(ui.handle).find('span.sliderValue').html(ui.value);
}
});
You forgot to post the create function, which is the real issue here, you're appending both spans to both sliders.
$(".slider").each(function () {
$(this).slider({
min: 0,
max: $(this).data('max'),
step: 1,
create: function (event, ui) {
$(event.target).find('a').append($(event.target).next('.sliderValue'));
},
slide: function (event, ui) {
$(ui.handle).find('span.sliderValue').html(ui.value);
}
});
});
FIDDLE
And do not use a global variable to get the values, you can get a sliders value at any time by calling $( ".selector" ).slider( "value" );
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 slider and the result (numbers) is displayed in the div with id #output.
So I want to pass this variable also to an input field with id #sites, but I'm stucking. How I can change the value attribute with .val()?
Here is the code
$(document).ready(function() {
$( function() {
var out = $('#output');
$( "#slider" ).slider({
min: 1,
max: 50,
slide: function(evt, ui) {
out.html(ui.value);
}
});
$("#sites").val(out);
} );
});
Firstly note that you only need one document.ready handler. To fix your actual issue, place the code that sets the value of #sites within the slide handler. At the moment you only set the value on load of the page before the user has interacted with the control Try this:
$(function() {
var $out = $('#output');
$("#slider" ).slider({
min: 1,
max: 50,
slide: function(evt, ui) {
$out.html(ui.value);
$("#sites").val(ui.value);
}
});
});
try $("#sites").val(out.text());
You have to do this in the slide callback:
slide: function(evt, ui) {
out.html(ui.value);
$("#sites").val(ui.value);
}
Because slide event happens when user interacts with the slider and you are trying to set the value outside at document ready block. At this point of time the value is at slider's defaults value.
$(document).ready(function() { // this is as same as
$( function() { // this one. extra doc ready block is not needed.
......
});
});
I am building a generator and I am using the arctext.js plugin. (http://tympanus.net/Development/Arctext/)
Here is my problem. I have an input field where people can type any text they want. After that there are sliders for font-size, letter spacing, and text arc.
the arctext.js works great on text that is there when the page loads, but not on text inputed.
Here is my code for the text that is input
/* top */
$(document).on('keyup', '#bead-top-text', function(e) {
$('#bTop').html($(this).val().replace(/\n/g,'<br/>'));
});
$(document).on('change', '#bead-top-font', function(e) {
$('#bTop').css({'font-family': ''+$(this).val()+'', 'font-weight': 'normal'});
});
$("#bead-top-font-size").slider({
range: "min",
value: 28,
min: 10,
max: 100,
slide: function( event, ui ) {
$('#bTop').css({'font-size': ui.value+'px'});
}
});
$("#bead-top-letter-spacing").slider({
range: "min",
value: 0,
min: 0,
max: 100,
slide: function( event, ui ) {
$('#bTop').css({'letter-spacing': ui.value+'px'});
}
});
$("#bead-top-arc").slider({
range: "min",
value: 0,
min: 0,
max: 1000,
slide: function( event, ui ) {
$('#bTop').arctext('set', {
radius : ui.value,
dir : 1,
animation : {
speed : 300
}
});
}
});
I am at a loss. Any ideas on how I can get this working? The generator is at http://www.xbracelets.com/xgen/
I fixed it by using the solution Erik posted here: Why does the changed input field change the element but no longer allows Jquery arc effects
changed this code from this:`
$(document).on('keyup', '#bead-top-text', function(e) {
$('#bTop').html($(this).val().replace(/\n/g,'<br/>'));
});
To this:
$(document).on('keyup', '#bead-top-text', function(e) {
$('#bTop').arctext('destroy');
$('#bTop').html($(this).val().replace(/\n/g,'<br/>'));
$('#bTop').arctext({radius: 1100});
});
im a jq newbie, but im fighting my way trough ;(
question:
i need to pass a slider variable(ui.value) to a "http://NAME/sensor?ConnectFloat InputB cf_GrA_l2pY VALUE_FROM_SLIDER" where value_from_Slider is the value, when i stop sliding.
.
my code can be found here:
http://jsfiddle.net/f2AWC/30/
or here:
$(function() {
$("#slider").slider({
value: 50,
min: 0,
max: 99,
step: 1,
slide: function(event, ui) {
$("#slider_value").val(ui.value);
}
});
$("#slider_value").val($("#slider").slider("value"));
});
html:
<div id="slider"></div>
sliderValue:
i know that im missing a new $function, but this is as far as i understand.
Thanks for any help!
use the stop event
$sliderValue="";
$("#slider").slider({
value: 50,
min: 0,
max: 99,
step: 1,
slide: function(event, ui) {
$("#slider_value").val(ui.value);
},
stop: function(event, ui) {
alert(ui.value);
$sliderValue=ui.value; //set the value to a global variable
}
});
$("#slider_value").val($("#slider").slider("value"))
//send the value here
// $.post("http://NAME/sensor?ConnectFloat InputB cf_GrA_l2pY VALUE_FROM_SLIDER",{value:$sliderValue},function(data){...});
here is the fiddle http://jsfiddle.net/f2AWC/34/
I am not sure I understand the part with http://NAME/sensor?ConnectFloat InputB cf_GrA_l2pY VALUE_FROM_SLIDER. Can you elaborate a bit more there?
When you stop sliding, you can use stop function, which works the same way as slide. Documentation here
you can use the slider val and append it to the link href
e.g.
$('#link').attr('href','http://NAME/sensor?ConnectFloat InputB cf_GrA_l2pY '+$("#slider_value").val());
Demo - http://jsfiddle.net/Jayendra/f2AWC/32/
It might be a bit late to answer on the post.
But after looking at the question.You might need to send an AJAX request over the stop event of the jquery slider.
Following code might be helpful in future for fellow programmers facing the same problem.
$(document).ready(function(){
$("#slider").slider({
range : "min",
min : 0,
max : 100,
value : 3,
stop : function(event, ui) {
slideValue = ui.value;
$.ajax({
url : "http://sample/url/request",
type : "POST",
data : {
"slideValue" : slideValue
},
dataType : "json",
success : function(response){
console.log(response);
}
});
}
});
});
http://api.jqueryui.com/slider/#toptions
I have the following code that implements 2 jQuery sliders:
<script type="text/javascript">
$(document).ready(function () {
$("#wheelLeft").slider({ value: 50, min: -100, max: 100, slide: handleSlide });
$("#wheelRight").slider({ value: -10, min: -100, max: 100, slide: handleSlide });
});
function handleSlide(event, ui) {
$("#lblInfo").text(ui.id + ':' + ui.value);
}
</script>
As you see, both sliders generate a slide event which is handled by handleSlide function. Inside the handleSlide function, I can get the value of the slider by calling ui.value, but how do i know which slider actually generated the event?
I've tried ui.id, ui.name and some others that seemed logical, but they all come back as undefined. How do I get actual name of its CSS implementation (e.g. either #wheelRight or #wheelLeft)?
Thanks.
Try wrapping ui.handle
function handleSlide(event, ui) {
$("#lblInfo").text( $(ui.handle).attr("id") + ':' + ui.value);
}
Edit: Oops, that returns the "a" element. This should return the parent element id:
$(ui.handle).parent().attr('id')
You can pass the id selectors (or any arguments of your choice) directly to your handler function:
$(document).ready(function () {
$("#wheelLeft").slider({
value: 50, min: -100, max: 100,
slide: function(event, ui) {
handleSlide(event, ui, "#wheelLeft");
}
});
$("#wheelRight").slider({
value: -10, min: -100, max: 100,
slide: function(event, ui) {
handleSlide(event, ui, "#wheelRight");
}
});
});
function handleSlide(event, ui, idSelector)
{
$("#lblInfo").text(idSelector);
}
function handleSlide(event, ui) {
var sender = event.srcElement || event.target;
$("#lblInfo").text(ui.id + ':' + ui.value);
}
The sender should contain the raw element that triggered the event.