I am attempting to calculate the sum of multiple jQuery range sliders. There are many results on stackoverflow when it comes to this, most are not what I'm trying to accomplish, and others show 2 sliders as an example, when I try to add more it breaks (not sure what I'm doing really)..
Here is what I have, 6 sliders, and then I want it to calculate the overall rating after the last one.
http://fasterforms.com/images/111914.png
Here is a working fiddle, but as I said, when I try to either add onto the example it breaks, or it is for a "text" input and when I made it a jQuery "range" input it doesn't work.
http://jsfiddle.net/DULYW/2/
Here is the closest one I've got to work with 2 range sliders, but when I try to add more based off the code it doesn't work either.
<script type="text/javascript">
function calc(A,B,SUM) {
var one = Number(A);
if (isNaN(one)) { alert('Invalid entry: '+A); one=0; }
var two = Number(document.getElementById(B).value);
if (isNaN(two)) { alert('Invalid entry: '+B); two=0; }
document.getElementById(SUM).value = one + two;
}
</script>
Enter a number:
<input name="sum1" id="op1" value="" onChange="calc(this.value,'op2','result')" type="range" min="0" max="5" data-highlight="true" />
and another number:
<input name="sum2" value="" id="op2" onChange="calc(this.value,'op1','result')" type="range" min="0" max="5" data-highlight="true" />
Their sum is:
<input name="sum" value="" id="result" readonly style="border:0px;">
It always seems anything that works normally for me always refuses to work the same way once I add it to my jQuery mobile pages, any help would be awesome.
http://jsfiddle.net/DULYW/60/
Add on change event:
JS:
$('.add').change(function(){
var sum = 0
$('.add').each(function(){
sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
});
$('#total').html(sum);
})
HTML:
<input class="add" name="sum1" type="range" min="0" max="5" data-highlight="true" />
<input class="add" name="sum1" type="range" min="0" max="5" data-highlight="true" />
<input class="add" name="sum1" type="range" min="0" max="5" data-highlight="true" />
<input class="add" name="sum1" type="range" min="0" max="5" data-highlight="true" />
<p id="total"></p>
For jQuery mobile you need to make sure that you put your code within an appropriate page event so that the widgets have been created. So if your sliders were within a data-role=page div with an id="page1", you could handle the pagecreate event and within it, run the addAll to get the initial total and then add a change handler to each of the sliders that also runs the addAll function:
$(document).on("pagecreate", "#page1", function () {
$(".add").on("change", function () {
addAll();
});
addAll();
});
function addAll() {
var sum = 0
$('.add').each(function (){
sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
});
$('#total').html(sum);
}
DEMO
Both worked for me, but I ultimately switched mine to ezankers coding because it allowed me to have different names and they didnt have to be all the same.
http://jsfiddle.net/ezanker/DULYW/61/
$(document).on("pagecreate", "#page1", function () {
$(".add").on("change", function () {
addAll();
});
addAll();
});
function addAll() {
var sum = 0
$('.add').each(function (){
sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
});
$('#total').html(sum);
}
Thanks for both of your help, you helped me out a lot.
Related
Hey I'm want to sync 2 inputs so if someone change the slider then should also change the number input and the other way round I know there are other answered Question but the did not work form me because it is important not to change any class names or ids only the number input sync with the slider but not also the other way round my code is:
<div class="slidecontainer">
<input type="range" min="0.25" max="5" value="1" step="0.25" class="slider" id="playbackSpeed">
<input type="number" value="1" class="number" id="playbackSpeed" placeholder="1,0">
</div>
my js is
document
.querySelector(".slider")
.addEventListener("input", updateValue);
document
.getElementsByClassName("number")
.addEventListener("input", updateValue);
function updateValue(e) {
var sibling =
e.target.previousElementSibling ||
e.target.nextElementSibling;
sibling.value = e.target.value;
}
You can even shorten the whole thing to:
const inputs=[...document.querySelectorAll("input")];
inputs.forEach((inp,i)=>inp.addEventListener("input",()=>
inputs[1-i].value=inputs[i].value )
)
<div class="slidecontainer">
<input type="range" min="0.25" max="5" value="1" step="0.25" class="slider" id="playbackSpeed">
<input type="number" value="1" class="number" id="playbackSpeed" placeholder="1,0">
</div>
let range=document.querySelector("input[type=range]");
let number=document.querySelector('input[type=number]')
range.addEventListener("change",(e)=>{
number.value=e.target.value;
})
number.addEventListener("change",(e)=>{
range.value=e.target.value;
})
For more goto: https://codepen.io/Gangster_sCode/pen/abNKJMm
I have a input field for which I am trying to replicate hours in the day 0 - 24:
<input type="number" min="0" max="24" step="1" value="00" class="time-hours">
<input type="number" min="0" max="60" step="1" value="00" class="time-seconds">
When I click on the up/down chevrons, the max, and min I can go to are 24 and 0 as set in my attributes.
However, if I click on a cell, I can enter any number, e.g. 100.
How can I ensure only numbers between 0 and 24 can be entered?
If its a form submit, the browser will stop the user. But in case you really need the validation, you can do this:
$(".time-hours").keyup(function() {
if ($(this).val() > 24) {
$(this).val("24");
}
if ($(this).val() < 0) {
$(this).val("0");
}
});
$(".time-seconds").keyup(function() {
if ($(this).val() > 60) {
$(this).val("60");
}
if ($(this).val() < 0) {
$(this).val("0");
}
});
Here is the JSFiddle demo
If you want to use javascript you can simple use this below code:
<input type="number" min="0" max="24" step="1" value="00" class="time-hours" onblur="return minmax(this.value);">
<input type="number" min="0" max="60" step="1" value="00" class="time-seconds" onblur="return minmax(this.value);">
<script>
function minmax(val){
if(val > 24 || val < 0){
alert("Value cannot be grater than 24 and min than 0");
return false;
}
}
</script>
I have used onblur because whenever value changes in two boxes they will trigger a function and it will check textbox value if value is greater than 24 or min than 0 it will prompt an alert.
I have used alert you can use anything for your validations.
I hope it will help you.
You can perform this pure JavaScript solution:
<script>
ob = document.getElementById('f');
ob.onblur = function(){
if (ob.value*1 > ob.max*1 || ob.value*1 < ob.min*1){
ob.value = 24
}
}
</script>
Here you give the field an id. You are able to enclose it into a function to use it many fields.
Here is a demo
I'm a newbie in terms of js, and I need to make such a calculator that does not provide data, but takes them from the field. For illustration I did this file
jsfiddle.net/HHv3y/3/
<input id="id1" type="range" min="1" step="1" max="6" value="1" onChange="sliderChange(); setValue1(this.value)" />
<br>
<input id="id2" type="range" min="1" max="4" value="1" step="1" onChange="sliderChange(); setValue2(this.value)" />
result: <span id="sliderStatus">12</span>
There are only two sliders (1 - 6 steps long) and a field for the result. In the jsFiddle is an example of a field which I would like to set.
I just need to show the value of the intersections of the two sliders, which represents an adequate entry field.
Try this simple approach.
function sliderChange() {
var var1 = document.getElementById('id1').value;
var var2 = document.getElementById('id2').value;
if (var1 == var2) { //If both values are equal show the result
document.getElementById('sliderStatus').innerHTML = var1;
} else {
alert('Not interscted');
}
}
Whenever the values are equal, the resultant value will be displayed.
JSFiddle
I have a html5 range input and a text box input. When the range changes, the text box will get updated. But what should I do so that when I put a number in the text box, the range input gets updated?
This is my current code:
<div>
<input id="slider" type="range" min="0" max="200" />
<input id="box" type="text" value="0"/>
</div>
<script>
var slider = document.getElementById('slider');
$('#box').change(function(){slider.value=parseInt(this.value)});
</script>
When I edit my text box, my slider (range input) does NOT change. What am I doing wrong? Can it be that I shouldn't be using slider.value to update the slider? If that is the reason, what is the correct way to do that?
Hey Everyone Those who don't know , we don't need any js or jquery for this
<form>
<div>
<input id="rangeInput" type="range" min="0" max="200" oninput="amount.value=rangeInput.value" />
<input id="amount" type="number" value="100" min="0" max="200" oninput="rangeInput.value=amount.value" />
</div>
</form>
It's a simple script, just do this:
<label for=range1>Slide, then press "Click to search slider value"</label>
<span>-1000 </span><input type="range" id="slide1" min="-1000" max="1000" value=0 step=0.25 onchange="printValue('slide1', 'rangeValue1')"><span> 1000 </span>
<i><input type=text id="rangeValue1" value=0 width=25% onchange="slideValue('slide1', 'rangeValue1');"><span> is the value of the slider now</span></i><br/><br/>
<script>
function printValue(sliderID, spanbox) {
var x = document.getElementById(spanbox);
var y = document.getElementById(sliderID);
x.value = y.value;
}
function slideValue(sliderID, spanbox){
var x = document.getElementById(spanbox);
var y = document.getElementById(sliderID);
y.value = parseInt(x.value);
}
window.onload = function() { printValue('slide1', 'rangeValue1'); }
</script>
(Of course, this only works when you press enter and submit the value to the "onchange")
in my side I did it in just Javascript and adding a onchange event.
I also added the value=0 to range so that make it start at the beguining.
<div>
<input id="slider" type="range" min="0" max="200" value="0"/>
<input id="box" type="text" value="0"/>
</div>
var slider = document.getElementById('slider');
var box = document.getElementById("box");
slider.onchange = function(){
box.value = slider.value;
}
And add this if you want to make it work on both side
box.onkeyup = function(){
slider.value = box.value;
}
This fiddle works:
var slider = document.getElementById('slider');
$('#box').change(function(){
slider.value=parseInt(this.value);
});
(So that's your current code, actually. Did you import the jQuery library?)
Keep in mind that you've set the slider's range to 200. Try some values between 0 and 200.
It's actually quite easy. It's all written in jQuery Tools API documentation. So I changed my code to this and it worked:
<div>
<input id="slider" type="range" min="0" max="200" />
<input id="box" type="text" value="0"/>
</div>
<script>
var sliderapi = $("#slider").data("rangeinput");
$('#box').change(function(){sliderapi.setValue(parseInt(this.value))});
</script>
$('#box').change(function(){
$('#slider').attr({"value":parseInt(this.value)});
});
Might work.
Hey having a little trouble jquery and the hmtl5 range. I'm try to get the values as they changed but the event listener is not capturing it. Currently my code is:
HTML
html += '<li>Apply Credits: <input type="range" min="0" max="'+credits+'" name="discount_credits" id="discount_credits" /> <span>'+credits+'</span></li>'
And the JS is:
$('#discount_credits').mousewheel( function() {
alert('it changed!');
alert('new value = ' + $(this).val());
});
I've also tried
$('#discount_credits').change( function() {
alert('it changed!');
alert('new value = ' + $(this).val());
});
Neither seem to work. Am I doing something wrong?
$('input[type=range]').on('input', function () {
$(this).trigger('change');
});
This fires the change event on every input event.
Does not seem to have any problem on HTML5 <input type="range"> using change.
See: http://jsfiddle.net/DerekL/BaEar/33/
I assume your span has an id: <span id="slidernumber">...</span>
Lets also assume that you have a few sliders, and you want to see a text change if any of them were moved:
<li>
Apply Credits1:
<input type="range" min="0" max="100"
name="discount_credits1" id="discount_credits"
/>
</li>
<li>
Apply Credits2:
<input type="range" min="0" max="100"
name="discount_credits2" id="discount_credits"
/>
</li>
<span id="slidernumber">50</span>
Try this:
$(document).ready(function(){
$("[type=range]").change(function(){
var newval=$(this).val();
$("#slidernumber").text(newval);
});
});
http://jsfiddle.net/MahshidZeinaly/CgQ5c/
Now lets assume that you have a few sliders, but you want to see a text change if a particular one of them were moved. (I assume it because the range input is inside li tag, and you gave it a name):
<li>
Apply Credits1:
<input type="range" min="0" max="100"
name="discount_credits1" id="discount_credits"
/>
<span id="slidernumber">50</span>
</li>
<li>
Apply Credits2:
<input type="range" min="0" max="100"
name="discount_credits2" id="discount_credits"
/>
<span id="slidernumber">50</span>
</li>
Try this:
$(document).ready(function(){
$("[type=range]").change(function(){
var newv=$(this).val();
$(this).next().text(newv);
});
});
http://jsfiddle.net/MahshidZeinaly/2pe7P/1/
The on change event seems to be working correctly for me: http://jsfiddle.net/zV3xD/7/
<input type="range" min="0" max="100" name="discount_credits" id="discount_credits" />
<span id="newValue" value="0">0</span>
$('#discount_credits').change( function() {
var newValue = this.value;
$('#newValue').html(newValue);
});
Or you can try something like this:
<form oninput="result.value=parseInt(a.value)">
<input type="range" name="a" value="50" /> =
<output name="result">0</output>
</form>
Using the output example here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output
Several test and bug fixed!
$('input[name=form_range]').change('mousestop',function () {
});