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
Related
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());
}
});
})
I'm eager to find out if its possible to place last value in series to yAxis in highcharts.
It supposed to be simple label with last point value shown on the right side of the charts, dinamically chanhing when we add points to the chart.
thanks!
There are probably several methods.
One that I would use can be seen in this example:
http://jsfiddle.net/jlbriggs/zXLZA/
data: [7,12,16,32,{y:64,dataLabels:{enabled:true}}]
This makes use of the datalabels, which are enabled only for the last data point.
The downside to this is that you need to specify that in your data. Not hard to do, but may not fit your needs.
Another way would be to use a second y axis, and the tickPositions property:
http://jsfiddle.net/jlbriggs/zXLZA/4/
Another possible solution is to use tickPositioner with second yAxis. In such case with dynamic data, everything will be computed itself, see: http://jsfiddle.net/3c4tU/
tickPositioner: function(min,max){
var data = this.chart.yAxis[0].series[0].processedYData;
//last point
return [data[data.length-1]];
}
to get the highest value in any axis and series, use the function getExtreme(). It will find you the extreme value (highest or lowest depending of the argument you put behind). Select the chart, the axis and the series before.
here's an example: (whith your chart associated to the variable 'yourChart')
var highestValue = yourChart.yAxis[0].getExtremes().dataMax;
It will return the highest value of the first Y-axis' associated series.
While this below will return the lowest of the second X-axis' associated series:
var lowestValue = yourChart.xAxis[1].getExtremes().dataMin;
My recommended solution:
plotOptions: {
areaspline: {
fillOpacity: 0.2,
dataLabels: {
enabled: true,
borderRadius: 5,
backgroundColor: 'rgba(252, 255, 197, 0.7)',
borderWidth: 1,
borderColor: '#AAA',
y: -6,
formatter: function() {
if (this.x == this.series.data[this.series.data.length-1].x) {
return this.series.name + ': '+this.y;
} else {
return null;
}
}
}
}
}
we can make use of formatter for this
here is an example to display the last value
http://jsfiddle.net/kgNy4/1/
here is an example to display maximum value
http://jsfiddle.net/kgNy4/
In the example I have put
dataLabels: {
enabled: true
}
so that formatter function will be executed
I hope this will be useful for you
I am using the plugin the ColumnFilter to render filters for each column in Datatables.
ColumnFilter renders two input boxes (From & To) in order to perform 'range' filtering of a table.
I am trying to replace these input boxes with a jqueryUI slider but cannot seem to make it work.
I have managed to make a slider control two separate 'from' & 'too' inputs with the following code:
//SLIDER
$(function() {
var $slider = $('#Slider'),
$lower = $('input#Min'),
$upper = $('input#Max'),
min_rent = 0,
max_rent = 400;
$lower.val(min_rent);
$upper.val(max_rent);
$('#Slider').slider({
orientation: 'horizontal',
range: true,
animate: 200,
min: 0,
max: 400,
step: 1,
value: 0,
values: [min_rent, max_rent],
slide: function(event,ui) {
$lower.val(ui.values[0]);
$upper.val(ui.values[1]);
}
});
$lower.change(function () {
var low = $lower.val(),
high = $upper.val();
low = Math.min(low, high);
$lower.val(low);
$slider.slider('values', 0, low);
});
$upper.change(function () {
var low = $lower.val(),
high = $upper.val();
high = Math.max(low, high);
$upper.val(high);
$slider.slider('values', 1, high);
});
});
This works fine and I can see the values change in the two input boxes change as I move the slider.
However, when I swap the input#Min and inut#Max element for the the two input boxes that are rendered by the ColumnFilter plugin. Nothing seems to happen. I cannot see any values update in the input boxes and the table does not auto sort as expected.
Perhaps I am approaching this the wrong way? Is there any other way to make a slider work with Datatables and the Columnfilter plugin?
Many thanks!
The two input boxes used for filtering are being 'listened to' for change event but updating the values via UI sliders does not trigger this.
I had a similar problem and ended up just forcing change() on sliderstop (event triggered by slider on mouseup) because of the dynamic content being loaded on change which I didn't want changing on slide, but you could force change() on slide too.
try:
$lower.change();
$upper.change();
after updating the values with val();
Should work :)
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]);
}