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.
Related
New to front-end development and getting confused with jQuery. I have a jQuery slider with custom steps, but can't get the output to sync with the rest of my program. I think I need .addEventListener('input') to take the values produced by the slider so that the text at the bottom of the output (#infocenter) updates with the year chosen by the slider.
document.getElementById('infocenter').innerHTML = '<p>(this text should update with the year above)</p>';
var sliderAmountMap = [1940, 1950, 1960, 1970, 1980, 1990, 2009, 2015];
//new jQuery slider
$(function() {
$( "#slider" ).slider({
value: 0,
min: 0,
max: sliderAmountMap.length-1,
slide: function( event, ui ) {
$( "#amount" ).val(sliderAmountMap[ui.value] );
}
});
$( "#amount" ).val(sliderAmountMap[$( "#slider" ).slider( "value")] );
});
https://jsfiddle.net/kaseyklimes/c0xpL1va/
If I understand correctly, I think you just need to update the html of the desired element at the same time you're updating the value of the text box:
slide: function( event, ui ) {
$( "#amount" ).val(sliderAmountMap[ui.value]);
$( "#infocenter" ).html(sliderAmountMap[ui.value]);
}
Updated JSFiddle
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
Function not triggered when moving slider to fast. I'm calling function using "slide" with Jquery UI slider. Is there a way to force it to call the function on each step? Here's the code:
var last = currentZoom;
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0.2,
max: 1.3,
value: currentZoom,
step: 0.1,
slide: function( event, ui ) {
if (ui.value > last) {
zoomIn();
}else{
zoomOut();
}
console.log($( "#slider-vertical" ).slider('value'));
last = ui.value;
}
});
So just to recap, while sliding it to fast it doesnt recognize the slide and it leads to it on skipping steps resulting in inaccurate values.
Thanks
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 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?