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
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 need to user to select a time, and the slider seems the best option for this, however, it is only made for decimal values. This should not be a problem because I can thread them as 'minutes since 0:00', but I need to override what is displayed to the user in the inputbox and tooltip.
Is there a way to override the decimal values with custom formatting, so I convert 'minutes since 0:00' to a readable time (like 8:30)?
The jQM slider uses type="number" and also hooks up the input to its code. So one way around this is to hide the input, get its value, convert to the string you want and write to your own input placed where the old one was.
DEMO
I have placed the slider markup within a named container and added an input to the container that will display the time:
<div id="theTime" class="time-slider">
<label for="sliderTime">Time:</label>
<input type="range" name="sliderTime" id="sliderTime" data-highlight="true" min="0" max="1444" value="60" />
<input type="text" data-role="none" class="timeLabel ui-shadow-inset ui-body-inherit ui-corner-all ui-slider-input" value="1:00" disabled />
</div>
In CSS, I hide the existing input and then place the new input where the old one was:
.time-slider input[type=number] {
display: none;
}
.time-slider .timeLabel{
position: relative;
top: -38px;
}
Then in code, handle the change event, convert minutes to time string and write the string to the new INPUT and the tooltip of the slider handle:
$(document).on("pagecreate", "#page1", function(){
$("#sliderTime").on("change", function(){
var time = IntToTime($(this).val());
$("#theTime .timeLabel").val(time);
$("#theTime .ui-slider-handle").prop("title", time);
});
});
function IntToTime(val){
var hours = parseInt( val / 60 );
var min = val - (hours * 60);
var time = hours + ':' + (min < 10 ? '0' + min : min);
return time;
}
UPDATE: There was some interest in doing this with a range slider in order to select a start and end time. I have created an updated fiddle with a solution:
RANGESLIDER FIDDLE
If you need a single slider then check the following code based on JQuery UI Slider for time
$(function() {
$("#slider-range").slider({
min: 0,
max: 1440,
step: 15,
slide: function(e, ui) {
var hours = Math.floor(ui.value / 60);
var minutes = ui.value - (hours * 60);
if(hours.length == 1) hours = '0' + hours;
if(minutes.length == 1) minutes = '0' + minutes;
if(minutes==0)minutes = '00';
$('#slider1Value').html(hours+':'+minutes);
}
});
});
Fiddle Demo
I'm fairly javascript and jquery. I'm trying to add a slider to my webpage. It's a basic slider where anyone can select a value between 0-100. I'm not sure how to mark SOME intervals in the middle.
This is the code i have so far
<script>
$(function() {
var temp = 0;
$( "#slider" ).slider({
animate: true,
value:temp,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val(ui.value );
},
stop: function(event, ui) {
temp = ui.value;
//Do something
}
});
$( "#amount" ).val($( "#slider" ).slider( "value" ) );
});
</script>
It is functioning properly. What i wanna try to do is add interval markers at 0.25,50,75 and 100.
I have gone through a few questions on SO but not sure how to proceed with the implementation. Would appreciate the help.
I tried this implementation: http://jsbin.com/iwime but this is not what i am trying to do as i just want the ticks to appear at those regular intervals but users shold stll be able to select other values.
Thanks
Cheers
I am guessing you want something like this: http://jsbin.com/iwime/116
So, instead of using the number of ticks in the max option of slider, you use whatever max units you want to provide, e.g. 100. Then in refershTicks(), update the algorithm to toggle the class.
Slider settings:
var slider = $("#slider").slider({
...
max: 100, // the only change
...
});
And the refreshTicks() method:
function refreshTicks() {
var s = slider
, lo = s.slider("values", 0), hi = s.slider("values", 1);
var max = s.slider('option', 'max');
s.find(".tick").each(function(i) {
var i = (i + 1) * (max/ticks.length) - (max/ticks.length)/2; // the updated algorithm
var inRange = (i >= lo && i < hi);
$(this)
[(inRange ? 'add' : 'remove') + 'Class']("ui-widget-header")
[(inRange ? 'remove' : 'add') + 'Class']("ui-widget-content");
});
}
Similar to this SO Question : The answer from Bijan might help.
The implementation of jQuery UI slider he suggest may help you to find a solution:
http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/
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 :)
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]);
}