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
Related
I'm using the Slider widget, as a range from 0 to 500000, in my rails web app. I'm trying to display the value of slider as it changes, but I don't know where I'm wrong. I'm new to JQuery, help would be much appreciated.
JQuery:
<script type="text/javascript">
$(document).ready(function() {
var slider = $("#the_slider").slider({
range: true,
min: 0,
max: 500000,
step: 1,
values: [0, 500000],
animate: 'slow',
slide: function(event, ui) {
$("#q_rent_gteq").val(ui.values[0]);
$("#q_rent_lteq").val(ui.values[1]);
},
slide: function(event, ui) {
$(ui.handle).find('span').html('฿' + ui.value[0]);
$(ui.handle).find('span').html('฿' + ui.value[1]);
}
});
$("#q_rent_gteq").val(slider.slider("values")[0]);
$("#q_rent_lteq").val(slider.slider("values")[1]);
});
</script>
View:
<div id="the_slider"></div>
<span id="q_rent_gteq"></span>
<span id="q_rent_lteq"></span>
Use .text if #q_rent_gteq or #q_rent_lteq are not inputs, textareas or selects. Other than this I cannot reproduce your error. Also combine both your slides. There is no need for two
slide: function(event, ui) {
$("#q_rent_gteq").val(ui.values[0]);
$("#q_rent_lteq").val(ui.values[1]);
$(ui.handle).html('฿' + ui.values[0]);
$(ui.handle).html('฿' + ui.values[1]);
}
Also ui.handle is a span itself. Did you mean to find that span or another? I don't see any others in the jQuery slider that can be found with a .find.
https://jsfiddle.net/eu793by7/
I couldn't find a solution to this problem I'm having with the default jQuery slider and outputting the current value:
It seems like the value is the one from the "previous" step.
With a min value of 0, a max value of 10 and step of 0.25 the most left position displays a value of 0.25 and the most right 9.75 - which is simply wrong.
Does anyone know why this is or how to fix it?
HTML:
<div id="slider"></div>
JavaScript:
$('#slider').slider({
min: 0,
max: 10,
value: 2.5,
step: 0.25
});
$('#slider').on('slide', function( event, ui ) {
var value = $('#slider').slider('option','value');
console.log(value);
});
Any help is much appreciated.
You just need to use ui.value to get the value of the slider:
$('#slider').on('slide', function( event, ui ) {
console.log(ui.value);
});
If you want to see just the value where it stops, and not every value that the slider passes by, use the stop event:
$('#slider').on('slidestop', function( event, ui ) {
console.log(ui.value);
});
See http://api.jqueryui.com/slider/#event-stop
Got it!
the "slide" event needs to be called in the slide function:
$('#slider').slider({
min: 0,
max: 10,
value: 2.5,
step: 0.25,
slide: function( event, ui ) {
value = ui.value;
console.log(value);
}
});
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" );
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 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});
});