I need the variable "value" in my slider plugin to be the integer value of a input in the form:
$(function () {
$("#calcSlider").slider({
min: 0,
max: 90,
step: 5,
value: /* ACCESS HERE!!!!!! */,
slide: function (event, ui) {
$("#calcSup").val(ui.value);
}
});
});
I need value: to be the value in calcSup or ${form.calcSup}, but that is a string. I need it parsed to a int:
<input type="text"
id="calcSup"
name="calcSup"
value="${form.calcSup}"
size="3"
readonly="readonly" />
Maybe you are looking for the parseInt function, more details can be found here:
http://www.w3schools.com/jsref/jsref_parseint.asp
$(function () {
$("#calcSlider").slider({ min: 0,
max: 90,
step: 5,
value: parseInt($('input#calcSup').val()),
slide: function (event, ui) {
$("#calcSup").val(ui.value);
}
});
});
<input type="text" id="calcSup" name="calcSup" value="${form.calcSup}" size="3" readonly="readonly"/>
If you're going to parse the value to an integer, don't forget to include the radix so it doesn't wind up getting confused for base-8 or something.
$("#mySlider").slider({
// Set initial value to that of <input type="text" id="bar" value="23" />
value: parseInt( $("#bar").val(), 10 ),
// Update <input type="text" id="foo" /> anytime we slide
slide: function ( event, ui ) {
$("#foo").val(ui.value);
}
});
Demo: http://jsbin.com/oceqab/edit#javascript,html
This might be what you are looking for:
$(function () {
$("#calcSlider").slider({ min: 0,
max: 90,
step: 5,
value: parseInt($("#calcSup").val()),
slide: function (event, ui) {
$("#calcSup").val(ui.value);
}
});
});
Related
$( "#slider-1" ).slider({
min: 1,
step: 0.01,
max: 3,
value: 2,
animate:"slow",
orientation: "horizontal",
change: function (event, ui) {
$(this).slider('value', Math.round(ui.value));
ui.preventDefault();
}
})
This show too much recursion error in console how fix it.
thanks in advance.
I fixed that issue myself, by changing the code as below.
var rounded_value='';
$( "#slider-1" ).slider({
min: 1,
step: 0.01,
max: 3,
value: 2,
animate:"slow",
orientation: "horizontal",
change: function (event, ui) {
if(rounded_value!=ui.value){
rounded_value=ui.value;
$(this).slider('value', Math.round(ui.value));
}
return false;
}
})
This is the slider element with the call. I was trying to stop it on condition which was successful but after that it's stuck. I tried to add else{ return true; } but then as expected it doesn't run the rest. If I move the if else block at end the codes run then condition fires which is not what I desire.
$(".hdrHt").slider({
orientation: "horizontal",
range: "min",
max: 22,
min: 8,
value: 15,
create: function(){ $(this).find('.headHandle').text( $(this).slider("value")+'%'); },
slide: function(e,ui){
var hfs=currentVid.find('.ovlDivs').css('font-size').replace('px',''),hht=currentVid.find('.headerDiv').css('height').replace('px','');
if((parseInt(hfs)+10)>parseInt(hht)){ return false; }
currentVid.find('.middleDiv').css('height',(100-parseInt(currentVid.find('.ftrHt').slider("value"))-ui.value)+'%');
currentVid.find('.headerDiv').css('height',ui.value+'%'); $(this).find('.headHandle').text(ui.value+'%');
}
});
Ok I gave up too quickly it was easy.. But still if you have a cleaner solution please go ahead.
var stopPt=8;
$(".hdrHt").slider({
orientation: "horizontal",
range: "min",
max: 22,
min: 8,
value: 15,
create: function(){ $(this).find('.headHandle').text( $(this).slider("value")+'%'); },
slide: function(e,ui){
if(ui.value>stopPt){
currentVid.find('.middleDiv').css('height',(100-parseInt(currentVid.find('.ftrHt').slider("value"))-ui.value)+'%');
currentVid.find('.headerDiv').css('height',ui.value+'%'); $(this).find('.headHandle').text(ui.value+'%');
}
var hfs=currentVid.find('.ovlDivs').css('font-size').replace('px',''),hht=currentVid.find('.headerDiv').css('height').replace('px','');
if((parseInt(hfs)+15)>parseInt(hht)){ stopPt=ui.value; return false; }
}
});
I'm using the angular ui-slider, and I need to load the slider's min- and max values from an external source so that I can set them like this:
$scope.minMaxValues = {
slider1: {
min: 0,
max: 200
},
slider2: {
min: 0,
max: 200
},
slider3: {
min: 0,
max: 200
},
slider4: {
min: 0,
max: 200
},
slider5: {
min: 0,
max: 200
}
};
My HTML-looks like this:
<div class = "ui-slider-range ui-slider-handle" ui-slider="{range: true}" min="minMaxValues.slider1.min" max="minMaxValues.slider1.max" step="0.01" use-decimals ng-model="sliderValues[0]"></div>
Any suggestions on how to do this would be appreciated.
since ui-slider uses attributes on that directive, you need pass actual values:
<div class = "ui-slider-range ui-slider-handle" ui-slider="{range: true}" min="{{minMaxValues.slider1.min}}" max="{{minMaxValues.slider1.max}}" step="0.01" use-decimals ng-model="sliderValues[0]"></div>
I am looking to disable the functionality of the jQuery UI sliders until a radio button is checked. Pretty straight forward but I have not had any luck with the things I have tried so I am looking to get some help. For convenience: http://jsfiddle.net/nlem33/L5cY6/11/
$('#slider1').slider({
min: min_value,
max: max_value,
step: 1,
slide: sliderHandler,
stop: function (event, ui) {
}
});
var min_value = 0;
var max_value = 630;
$('#slider2').slider({
min: min_value,
max: max_value,
step: 5,
slide: sliderHandler,
stop: function (event, ui) {
}
});
You can initialize them disabled and then enable them when a radio button is clicked:
$('#slider1').slider({
min: min_value,
max: max_value,
step: 1,
disabled: true, // <= disabled on init
slide: sliderHandler,
stop: function (event, ui) {
}
});
// Enable function :
$(':radio').click(function() {
$('#slider1, #slider2').slider('enable');
});
http://jsfiddle.net/L5cY6/23/
Total JS noob here. I have the following line that implements the jQuery Slider:
<script type="text/javascript">
$(document).ready(function () {
$("#wheelLeft").slider({
orientation: 'vertical', value: 37,
min: -100, max: 100,
slide: function (event, ui) { $("#lblInfo").text("left"); } });
});
</script>
Basically on the slide event, the #lblInfo gets its text set to left. This works fine. However, I'd like to convert the inline anonymous function that handles the slide event into a regular function.
Can someone help out?
<script type="text/javascript">
function handleSlide(event, ui) {
$("#lblInfo").text("left");
}
$(document).ready(function () {
$("#wheelLeft").slider({
orientation: 'vertical', value: 37,
min: -100, max: 100,
slide: handleSlide
});
});
</script>
<script type="text/javascript">
function myfunc(event, ui) {
}
$(document).ready(function () {
myfunc(event, ui)
});
</script>
would do it. It's obviously not an ideal solution as it still uses the anonymous but should solve any issues you have where you need to manipulate the function manually
Just define a named function:
function doSlide(event, ui)
{
$("#lblInfo").text("left");
}
$(document).ready(function() {
$("#wheelLeft").slider({
orientation: 'vertical', value: 37,
min: -100, max: 100,
slide: doSlide
});
});
$(document).ready(function myFunction() {
// do something
});