So, this question is specifically for the attribute value from a jQUeryUI Spinner. I had attempted a number of different things in order to have it change, but the only thing that changes is arial-valuenow, which I actually don't care much for. In fact, if it could be removed, that would be optimal. I understand what aria attributes are for, however for this instance I need the correct attribute.
My current work is as follows:
$(function() {
$("#spinner").spinner({
min: 0,
max: 20,
step: 1,
start: 0,
spin: function(event,ui) {
var value = $($(this).attr("value")).val($(this));
}
});
});
I did look around this site and didn't really see anything related to my question. Any assistance you can offer is greatly appreciated!
EDIT:
While I am not particularly happy with it, I did find the answer:
$(function() {
$("#spinner").spinner({
min: 0,
max: 20,
step: 1,
change: function(event,ui){
$(this).attr("value",$(this).val());
}
});
})
It updates the value, yes, but unfortunately the problem (with my script which interacts with jQueryUI) was more complicated than I thought and I just wasted 6 hours on it.
Hopefully someone else can find this helpful though.
ANSWER:
$(function() {
$("#spinner").spinner({
min: 0,
max: 20,
step: 1,
change: function(event,ui){
$(this).attr("value",$(this).val());
}
});
})
Related
I am looking to make the jqueryUI spinner increment by a set of custom values on a list.
For example, 25, 50, 100, 250, 500, 1000
Is this possible?
The closest thing I can get it doing is stepping by a set amount.
Maybe it can be done by manually changing the value on the .spin call?
Any help on this would be great thanks
you can use this code,
var dlist = ['100','250','500', '1000']
$( ".spinner" ).spinner({
min: 0,
max: 3,
create: function(){
$(this).parent().append('<input class="spinner-text" value="'+dlist[$(this).val()]+'">');
},
stop: function(event,ui) {
$(this).siblings('.spinner-text').val(dlist[$(this).val()]);
}
});
Source
Note: if your array contains 4 values, set max as 3. because first value is already set by default.
see the DEMO
I'm trying to display a solid gauge with a "strange" max value, that is 96 (hours).
I'read that max and min value are elaborated by highcharts to set ticks, ranges etc but I don't understand why I can't display such a value or even other rounded values like 90 below 100.
Any idea?
The problem may be that the chart is generating a default tick interval e.g. 10, which adds up to 100.
You may be able to get what you want by specifying a tickerInterval which divides into 96 (e.g. 8).
yAxis: {
min: 0,
max: 96,
tickInterval:8,
http://jsfiddle.net/Vn4My/
You can use any max value, only thing is you should divide it by 1000 to get the tickInterval value, for example:
yAxis: {
min: 0,
max:96,
tickInterval:(96/1000),
},
Working example: http://jsfiddle.net/NareshChennuri/whuu5qbt/
To get the exact custom max value :
tickPositioner: function() {
return [this.min, this.max];
},
min: 0,
max: 6924,
refer this issue on github
Try This I am also facing the same issue but I resolve that issue this solution may be useful for you.
yAxis: {
min: minData,
max: maxData,
tickPositions: [minData, maxData]
},
Add tickPositions: [minData, maxData];
pls check similar example Example
Ref reference click here
I hope this is enough.
Thanks,
PVS
I would expect the following code to start my slider at '30' in it's range of 0-250, but yet it is not.
$(function() {
$( "#slider" ).slider({
value: 30,
min: 0,
max: 250,
step: 1,
slide: function(event, ui){
$("#edit-varprice").val(ui.value + ".00");
}
});
});
Image : http://gallery.twardnw.com/var/albums/Misc/Screen%20shot%202012-04-03%20at%203.06.59%20PM.png?m=1333490924
Its working fine for me. See jsFiddle Demo.
Perhaps you are missing something else or doing something in other parts of your code, can you post full code?
try removing the value from the options u chose, and adding it later using:
$( "#slider" ).slider( "option", "value", 40 );
Could you lower your max to 50 and see if the slider handle is offset, if so then its working just fine. In the image it looks like its slightly offset. 30/250 is only 12% and may be deceiving.
Hope someone can help me, I am new to Jquery and this is the only thing I am still struggeling with. I have a slider with 3 textboxes, when sliding the slider it will auto populate the values to all three textboxes. I want the fourth textbox to add all of the values from the 3 textboxes that's already got the values.
I am getting the values using the following:
<script>
$(function () {
var sum = 0;
$("#slider").slider({
value: 2300,
min: 500,
max: 4500,
step: 100,
length: 300,
slide: function (event, ui) {
// Rule Calculation
if (ui.value < 1000)
$("#amount3").val(ui.value * 0.15)
else
$("#amount3").val(150)
//10% Calculation
if (ui.value > 1000)
$("#amount8").val(ui.value - 1000)
else
$("#amount8").val(0)
$("#amount").val("R" + ui.value)
$("#amount9").val($("#amount8").val() * 0.10)
I ammended your code to do what you asked. You can view it here:
http://jsfiddle.net/rLKbR/163/
You have to use 'parseInt($("#idOfTextbox"))' to convert each value in your textboxes to integers so they can be added, otherwise you will get a concatenation of the values as your result. Hopefully this has accomplished your needs :)
I made something similar because I was looking for this functionality
http://jsbin.com/ojeruc/1/edit
Edit: I still have not resolved this issue. If anyone has advice I would appreciate it.
I have a jquery slider with two bars that the user can change to select a price range. Below the slider I display min: $xxx and max: $xxx to show the current price range. Here's the code:
$("#slider-price .slider").slider({
step: 10,
animate: true,
range: true,
min: 0,
max: 500,
values: [range_price[0],range_price[1]],
slide: function() {
range_price = $(this).slider("option", "values");
$("#low-price-label").text("Min: $"+range_price[0]);
$("#high-price-label").text("Max: $"+range_price[1]);
}
});
The slide option looks at what the value of the slider is, and updates the min and max numbers. However, they only change on mouseup, after the user is done sliding the bar. I want the numbers to update as the user is sliding the bars. How do I do this?
I use this in a media player I wrote
slide: function(event, ui) {
$("#amount").text(ui.value);
}
edit: Just re-read your question, you should be able to use 'ui.values' instead of value to return the array , parse it and go from there.
edit2: Try this function instead of the one you have.
slide: function(event,ui) {
range_price = ui.values;
$("#low-price-label").text("Min: $"+range_price[0]);
$("#high-price-label").text("Max: $"+range_price[1]);
}