I have a slider inside my script:
var uniquePrice;
$( "#slider-secondary" ).slider({
range: "min",
value: 0,
min: 0,
max: 50,
slide: function( event, ui ) {
$( "#amount-secondary" ).val( ui.value );
uniquePrice = ui.value * 1500;
}
});
console.log(uniquePrice);
And I need to use the uniquePrice var further in the code, outside of the slider function. And it doesn't work - console.log(uniquePrice); says "undefined".
What am I doing wrong?
P.S. Of course I defined the global variable before the function, sorry for forgetting to include here.
The console.log() is going to be called before that variable is set by that function. The js will:
declare the var
then setup the slider
the immediately call console.log()
So until the slide happens that variable will be undefined
You have to define the variable outside of the function.
var uniquePrice;
$( "#slider-secondary" ).slider({
range: "min",
value: 0,
min: 0,
max: 50,
slide: function( event, ui ) {
$( "#amount-secondary" ).val( ui.value );
uniquePrice = ui.value * 1500;
console.log(uniquePrice);
}
});
if you want the variable outside of the function you can do:
var uniquePrice;
$( "#slider-secondary" ).slider({
range: "min",
value: 0,
min: 0,
max: 50,
slide: function( event, ui ) {
$( "#amount-secondary" ).val( ui.value );
uniquePrice = ui.value * 1500;
doLog();
}
});
function doLog(){
console.log(uniquePrice);
}
edit: added the console.log to the slider function
I think I read somewhere that if you forget to put the 'var' infront of the name of the variable, it gets declared as a global variable. Please confirm or deny this ;)
P.S. What happens if you remove line #1 altogether? What kind of error do you get?
Related
I'm following along this example:
http://jqueryui.com/slider/#slider-vertical
I've copied the exact code (changing the div/input names to my own) from this example into another webpage, but chrome throws a Uncaught TypeError: undefined is not a function and the slider never appears.
The exact code that does not work:
$(function() {
$( "#timeframe_slider" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
$( "#month_week" ).val( ui.value );
}
});
$( "#month_week" ).val( $( "#timeframe_slider" ).slider( "value" ) );
});
When I change the code from what the example has to simply:
$( "#timeframe_slider" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 1,
value: 0,
slide: function( event, ui ) {
if (ui.value === 0) {
$( "#month_week" ).val("Month");
} else {
$( "#month_week" ).val("Week");
}}
});
it works perfectly.
I'm fairly new to javascript, but I understand that having:
$(function() {
code goes here
};
is to ensure that the page is ready. Can someone explain why when attempting to use the example the .slider() function suddenly does not work?
UPDATE
This problem does not appear when trying to recreate it in jsfiddle.. Here's exactly what I'm looking at however:
One thing to check is that you're not accidentally including jquery twice, causing the slider plugin to no longer be attached to $ when the $(function() { wrapped code fires.
Sorry this is more of a comment then an answer, but I don't have enough reputation to comment yet.
Okay, so a very similar question was asked here
jQuery UI Slider - Value returned from 'slide' event on release is different from 'change' value
But the answer was unsatisfactory in my opinion. Here is my JavaScript code: http://jsfiddle.net/AsDZJ/4/
function slideVal() {
var number = $("#number_slider").slider("value");
$("#number_field").append('Slide: ' + number + '<br/>');
}
function changeVal() {
var number = $("#number_slider").slider("value");
$("#number_field").append('Change: ' + number + '<br/>');
}
$(function() {
$( "#number_slider" ).slider({
min: 1,
max: 10,
change: changeVal,
slide: slideVal
});
$( "#number_slider" ).slider( "value", 5 );
});
The issue is that the slider is reporting different values between when the change handler is called, and when the slide handler is called.
Now, the other question points out that if you declare the function anonymously, you can simply use ui.value, like so:
$( "#number_slider" ).slider({
min: 1,
max: 10,
change: function(event, ui) {
$("#number_field").append('Change: ' + ui.value + '<br/>');
}
});
This does give more consistent results, but also means that if, as in my case, I have a lot of complex logic to perform whenever the event changes, I have to repeat code. In addition, the calculations involve slider values from multiple sliders.
How can I get access to the correct value from an explicitly declared function? Is this behavior in jQuery UI a bug?
Thanks
You can still define global functions with parameters, when you initialize the slider just pass in the function name instead of using an anonymous callbacks
function slideVal(e, ui) {
var number = ui.value;
$("#number_field").append('Slide: ' + number + '<br/>');
}
function changeVal(e, ui) {
var number = ui.value;
$("#number_field").append('Change: ' + number + '<br/>');
}
$(function() {
$( "#number_slider" ).slider({
min: 1,
max: 10,
change: changeVal,
slide: slideVal
});
$( "#number_slider" ).slider( "value", 5 );
});
I'm pretty new to jquery, but this is question. From my code below I have made 3 sliders each within a tag. Each of the three has an input field that is changed when the slider is moved to show the current value of the slider (simple jQueryUI plugin sliders). The final line involves another plugin that links all the sliders together so that they all add to 100 total and move when the others move.
The problem I'm having is that when I slide one, its value changes and shows but the others do not. I can get all of the values to change with some extra lines of code, but I don't know how to get (this) ui.value so that I can display the separate values for each of the sliders.
You can see in the third slider I tried to get it to do that, but the way it is set it only takes the same ui.value of the current slider being moved.
Can anyone help me with a solution to get (this) ui.value of the other sliders when i need to change it?
($(function() {
$( "#RedSlider" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 1,
animate: true,
slide: function( event, ui ) {
$( "#RedValue" ).val( ui.value );}
});
$( "#RedValue" ).val( $( "#RedSlider" ).slider( "value" ) );
});
$(function() {
$( "#BlueSlider" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 1,
animate: true,
slide: function( event, ui ) {
$( "#BlueValue" ).val( ui.value );}
});
$( "#BlueValue" ).val( $( "#BlueSlider" ).slider( "value" ) );
});
$(function()
{
$( "#EmptySlider" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 98,
animate: true,
slide: function( event, ui )
{
$( "#EmptyValue" ).val( ui.value );
$( "#RedValue").val(ui.value);
$( "#BlueValue").val(ui.value);
}
});
$( "#EmptyValue" ).val( $( "#EmptySlider" ).slider( "value" ) );
$( "#RedValue").val($("RedSlider)").slider("value"));
$( "#BlueValue").val($("RedSlider)").slider("value"));
});*/
$('div:gt(2)').slider().linkedSliders({policy: 'last'});
Your code will only every be executed once. You need to change the following line:
$( "#BlueValue" ).val( $( "#BlueSlider" ).slider( "value" ) );
To be something different when selecting the value of your slider at whatever time you need it.
This code:
$( "#BlueValue" ).val( $( "#BlueSlider" ).slider( "value" ) );
will only execute once. You need to have that in a value-changed callback for the slider, so the value will be updated continually.
On my page I have several sliders. They all need the same scale, but some of them go to 150, and some go to 200. I would like to set the max of them all to 200, but prevent some of them from moving passed 150. They are different $().slider() calls, so I'm simply interested in how to set the max of a slider to 200, but not allow any movement past 150...
I would think that this kind of behavior would be built-in, but apparently not?
FYI: I am using range: "min" for these sliders.
EDIT
http://jsfiddle.net/D9nAx/1/
use slide event:
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 200,
value: 60,
slide: function( event, ui ) {
if(ui.value> 150)
return false;
$( "#amount" ).val( ui.value );
}
});
fiddle : http://jsfiddle.net/dvz8E
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 200,
value: 60,
slide: slide
});
function slide(event, ui){
var result = true;
if (ui.value > 150){
$(this).slider( "value" , 150 );
result = false;
}
$( "#amount" ).val( $(this).slider( "value") );
return result;
}
http://jsfiddle.net/D9nAx/2/
How to make slider with jquery, like here?
User should select a value from slider, and this value should automatically be in input
I can not find the appropriate plug-in...
http://jqueryui.com/demos/slider/
$( "#slider" ).slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
//Its setting the slider value to the element with id "amount"
$( "#amount" ).val( "$" + ui.value );
}
});
You can customize the style to look like the example you mentioned.