How do I get a slider control with 2 values?
|...........
Value 1: 100
Value 2: 0
......|.....
Value 1: 50
Value 2: 50
...........|
Value 1: 0
Value 2: 100
Edit: these are just examples when dragged there and not 'step'
Example:
Html Slider:
If you need both values regardless the min and max and without knowing their values you can expand #Weedoze answer to reflect this
function updateTextInput(val) {
var value1 = Number(val) - Number(document.getElementById('range').min);
document.getElementById('value1').innerHTML = "value1: "+value1;
var value2 = Number(document.getElementById('range').max) - Number(val);
document.getElementById('value2').innerHTML = "value2: "+value2;
}
0<input id="range" type="range" name="rangeInput" min="0" max="200" onchange="updateTextInput(this.value);">200
<br />
<p id="value1"></p>
<p id="value2"></p>
Just add a "step"-property to the input
<input
type="range"
name="points"
id="points"
step="50"
value="50"
min="0"
max="100">
value1 would be the input value and value2 = 100 - value1
function updateTextInput(val) {
document.getElementById('value').innerHTML = val;
}
0
<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);">100
<br />
<p id="value"></p>
Related
I want the slider to not pass a certain limit. How can I set this is HTML and also change it in javascript?
<input type="range" min="0" max="100" value="30">
I want to set it so that the slider can never go past a certain value though the value will be there on slider i.e slider should have min:0 max:100 but never go past say 70.
this could work for your case, but set the max value to 70 is better in my opinion.
function test(e, el) {
if (e.target.value > 70) el.value = 70;
document.querySelector("h1").innerHTML = "range value: " + e.target.value;
}
<input type="range" min="0" max="100" style="width: 100%;" oninput="test(event, this)">
<br>
<h1>range value: 50</h1>
Here's a solution for you. If the user drags the slider over to 70, we reset it to 70 again.
<h1>Display a Range Field</h1>
<label for="vol">Volume <span id="currentvalue"> </span> (between 0 and 100):</label>
<input type="range" id="vol" name="vol" min="0" max="100" value="30">
<script type="text/javascript">
document.getElementById("currentvalue").innerHTML = document.getElementById("vol").value;
document.getElementById("vol").addEventListener("change", function(e){
if(e.target.value > 70) {
alert("You can't pick above 70 for now!");
this.value = 70;
}
document.getElementById("currentvalue").innerHTML = e.target.value;
e.preventDefault();
e.stopPropagation();
})
</script>
I created two buttons which decrease/increase the slider value. If I create one slide bar this code works but it doesn't work for many slide bars.
Value in Price-A is shown but Price_B is not working. I don't know to solve this problem. Please help me.
$('.more,.less').click(function() {
var value = parseInt($('#price').val());
// console.log($(this).hasClass('more'));
switch ($(this).hasClass('more')) {
case true:
value = value === 100 ? value : value + 5;
break;
case false:
value = value === 0 ? value : value - 5;
break;
}
$('#price').val(value).trigger('change');
});
$('#price').change(function(e) {
e.preventDefault();
var current_value = parseInt($('input').val());
$('#result').html("$" + current_value);
})
$('.more1,.less1').click(function() {
var value1 = parseInt($('#price1').val());
// console.log($(this).hasClass('more1'));
switch ($(this).hasClass('more1')) {
case true:
value1 = value1 === 255 ? value1 : value1 + 5;
break;
case false:
value1 = value1 === 0 ? value1 : value1 - 5;
break;
}
$('#price1').val(value1).trigger('change');
});
$('#price1').change(function(e) {
e.preventDefault();
var current_value = parseInt($('input').val());
$('#result1').html(current_value);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Price-A</h2>
<button class="less">less</button>
<input id="price" type="range" min="0" max="100" step="5" value="50" />
<button class="more">more</button>
<p id="result">$50</p>
<h2>Price-B</h2>
<button class="less1">less</button>
<input id="price1" type="range" min="0" max="255" step="5" value="50" />
<button class="more1">more</button>
<p id="result1">$50</p>
Just use e.target.value in $('#price1').change function.
Note that $('input') is first input and it is better to use e.target to make sure you found the correspond tag.
$('.more,.less').click(function() {
debugger
var value = parseInt($('#price').val());
// console.log($(this).hasClass('more'));
switch ($(this).hasClass('more')) {
case true:
value = value === 100 ? value : value + 5;
break;
case false:
value = value === 0 ? value : value - 5;
break;
}
$('#price').val(value).trigger('change');
});
$('#price').change(function(e) {
e.preventDefault();
var current_value = parseInt($('input').val());
$('#result').html("$" + current_value);
})
$('.more1,.less1').click(function() {
var value1 = parseInt($('#price1').val());
// console.log($(this).hasClass('more1'));
switch ($(this).hasClass('more1')) {
case true:
value1 = value1 === 255 ? value1 : value1 + 5;
break;
case false:
value1 = value1 === 0 ? value1 : value1 - 5;
break;
}
$('#price1').val(value1).trigger('change');
});
$('#price1').change(function(e) {
e.preventDefault();
var current_value = parseInt(e.target.value);
$('#result1').html(current_value);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Price-A</h2>
<button class="less">less</button>
<input id="price" type="range" min="0" max="100" step="5" value="50" />
<button class="more">more</button>
<p id="result">$50</p>
<h2>Price-B</h2>
<button class="less1">less</button>
<input id="price1" type="range" min="0" max="255" step="5" value="50" />
<button class="more1">more</button>
<p id="result1">$50</p>
your input selector was wrong thats all
var current_value = parseInt($('input').val());
Change this to
var current_value = parseInt($('#price1').val());
$('.more,.less').click(function() {
var value = parseInt($('#price').val());
// console.log($(this).hasClass('more'));
switch ($(this).hasClass('more')) {
case true:
value = value === 100 ? value : value + 5;
break;
case false:
value = value === 0 ? value : value - 5;
break;
}
$('#price').val(value).trigger('change');
});
$('#price').change(function(e) {
e.preventDefault();
var current_value = parseInt($('#price').val());
$('#result').html("$" + current_value);
})
$('.more1,.less1').click(function() {
var value1 = parseInt($('#price1').val());
// console.log(value1);
switch ($(this).hasClass('more1')) {
case true:
value1 = value1 === 255 ? value1 : value1 + 5;
break;
case false:
value1 = value1 === 0 ? value1 : value1 - 5;
break;
}
$('#price1').val(value1).trigger('change');
});
$('#price1').change(function(e) {
e.preventDefault();
var current_value = parseInt($('#price1').val());
$('#result1').html("$"+current_value);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Price-A</h2>
<button class="less">less</button>
<input id="price" type="range" min="0" max="100" step="5" value="50" />
<button class="more">more</button>
<p id="result">$50</p>
<h2>Price-B</h2>
<button class="less1">less</button>
<input id="price1" type="range" min="0" max="255" step="5" value="50" />
<button class="more1">more</button>
<p id="result1">$50</p>
The issue is because your var current_value = parseInt($('input').val()); line of code only ever selects the first input found in the DOM. It does not select the one related to the button which was clicked.
To fix this, and DRY up the code, use common class names to group elements by behaviour instead of id attributes. You can then use jQuery to traverse the DOM to relate the elements to each other to read/update them as needed.
The benefit of this method is that your JS code becomes more succinct, the HTML more generic, and together it becomes infinitely repeatable just by copy/pasting the HTML structure.
In addition note that your switch conditions are not necessary as the min and max attributes on the input will automatically prevent the value from going outside of those bounds.
With all that said, try this:
$('.more, .less').click(e => {
let $button = $(e.target);
let $price = $button.closest('.slide-container').find('.price');
$price.val((i, v) => parseInt(v, 10) + $price.prop('step') * $button.data('inc')).trigger('change');
});
$('.price').change(e => {
e.preventDefault();
let $price = $(e.target);
let $container = $price.closest('.slide-container');
$container.find('.result').text("$" + $price.val());
})
h2 {
font-size: 1em;
display: inline-block;
}
.result {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide-container">
<h2>Price A</h2>
<button class="less" data-inc="-1">less</button>
<input class="price" type="range" min="0" max="100" step="5" value="50" />
<button class="more" data-inc="1">more</button>
<p class="result">$50</p>
</div>
<div class="slide-container">
<h2>Price B</h2>
<button class="less" data-inc="-1">less</button>
<input class="price" type="range" min="0" max="255" step="5" value="50" />
<button class="more" data-inc="1">more</button>
<p class="result">$50</p>
</div>
<div class="slide-container">
<h2>Price C</h2>
<button class="less" data-inc="-1">less</button>
<input class="price" type="range" min="0" max="1000" step="50" value="650" />
<button class="more" data-inc="1">more</button>
<p class="result">$650</p>
</div>
I have a div with 5 input-type range silders and a submit button.
<div class="sliders" id="sliderbox">
<input type="range" name="points" min="0" max="100">
<input type="range" name="points1" min="0" max="100">
<input type="range" name="points2" min="0" max="100">
<input type="range" name="points3" min="0" max="100">
<input type="range" name="points4" min="0" max="100">
<input type="submit">
</div>
Under this div, I have four other hidden divs that contain content.
<div id="hidden1">Content</div>
<div id="hidden2">Content</div>
<div id="hidden3">Content</div>
<div id="hidden4">Content</div>
How can I get the average combined value (a number between 0 & 100) of all the rangesliders, and then slidetoggle one of these hidden divs on submit?
For example, if the cumulative average value of these sliders is between 0 to 25 on submit, is it possible for me to display "hidden1"? Or if the value is between 25 to 50, "hidden2" and so on?
So you have 5 sliders all having the same MAX value of 100. So max 500
To get Element index from the current range value:
Floor(current * endMax / (startMax + 1))
Example
const $sliders = $("#sliderbox").find("input[type='range']");
const $cont = $(".cont");
const totSliders = $sliders.length; // 5
const startMax = totSliders * parseInt($sliders.prop("max"), 10); // 500
const endMax = $cont.length; // 4
$sliders.on("input", function() {
// Get accumulated value of 5 sliders: 0...500
const current = $sliders.get().reduce((ac, el) => ac + parseInt(el.value, 10), 0);
// Get index 0...3
const index = Math.floor(current * endMax / (startMax + 1));
$cont.addClass("hide").eq( index ).removeClass("hide");
console.clear(); console.log('Current:' + current + ' Index:'+ index);
}).trigger("input"); // To make immediate effect
.hide {
display: none;
}
<div class="sliders" id="sliderbox">
<input type="range" name="points" min="0" max="100" value="0">
<input type="range" name="points1" min="0" max="100" value="0">
<input type="range" name="points2" min="0" max="100" value="0">
<input type="range" name="points3" min="0" max="100" value="0">
<input type="range" name="points4" min="0" max="100" value="0">
</div>
<div class="cont hide" id="hidden1">1 Content</div>
<div class="cont hide" id="hidden2">2 Content!!!</div>
<div class="cont hide" id="hidden3">3 Content</div>
<div class="cont hide" id="hidden4">4 Content!!!</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here I put in place some javascript. Probably this is something you want.
let avg = 0;
document.querySelector('.submit').addEventListener('click', event => {
document.querySelectorAll('.range').forEach(item => {
avg = Number(item.value) + avg;
});
avg = avg / 5;
if (avg >= 0 && avg <= 25) {
avg = 0;
document.querySelector('#hidden1').classList.add('show');
document.querySelector('#hidden1').classList.remove('hide');
}
});
JSFiddle
Using plain Javascript: if you utilize [HTMLNode].children, this will give you an array of elements within that node.
So you can gather all your inputs with:
document.getElementById('sliderbox').children
This will give you an HTMLCollection, that you can then iterate through with a for loop to retrieve each item's value, and calculate the average from that.
I have the following HTML:
<div class="filters">
<div class="filter-label">6</div>
<div class="filter-inputs">
<input type="number" name="i1" id="i1" value="1" min="0" step="1" />
<input type="number" name="i2" id="i2" value="2" min="0" step="1" />
<input type="number" name="i3" id="i3" value="3" min="0" step="1" />
</div>
</div>
The question:
I'd like to, when any input is changed, I want to get that value and
the value of the other two text boxes and add them all together. Once
I have the total value, I need to then change the text of the label
with the new value.
I also have the following JavaScript (jQuery) to detect when a change has happened, but after that, I can't figure out how to loop through each input in the div and get the value.
$('.filter .filter-inputs input').on('input', function() {
var element = $(this);
// ...
});
I looked at loops like the jQuery each method but I've got no idea how to loop through each input inside the filter-inputs div.
You could create array from inputs using map and get methods and then calculate sum with reduce method.
let inputs = $('.filters input');
let label = $('.filter-label');
inputs.on('input', function() {
let sum = inputs.map(function() {
return $(this).val()
}).get().reduce((r, e) => r + +e, 0);
label.text(sum)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filters">
<div class="filter-label">6</div>
<div class="filter-inputs">
<input type="number" name="i1" id="i1" value="1" min="0" step="1" />
<input type="number" name="i2" id="i2" value="2" min="0" step="1" />
<input type="number" name="i3" id="i3" value="3" min="0" step="1" />
</div>
</div>
Or you could just create array with Array.from method and then use reduce method to sum values.
let inputs = $('.filters input');
let label = $('.filter-label');
inputs.on('input', function() {
label.text(Array.from(inputs).reduce((r, {value}) => r + +value, 0))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filters">
<div class="filter-label">6</div>
<div class="filter-inputs">
<input type="number" name="i1" id="i1" value="1" min="0" step="1" />
<input type="number" name="i2" id="i2" value="2" min="0" step="1" />
<input type="number" name="i3" id="i3" value="3" min="0" step="1" />
</div>
</div>
Use this script
$('.filter-inputs input').change(function(){
var total = 0;
$('.filter-inputs input').each(function(){
total += parseInt($(this).val());
});
$('.filter-label').html(total);
});
No problem!
$('.filter .filter-inputs input').on('input', function() {
//not needed:
//var element = $(this);
// Obtain numeric entries
var i1 = Number($("#i1").val());
var i2 = Number($("#i2").val());
var i3 = Number($("#i3").val());
// Calculate sum of entries
var total = i1 + i2 + i3;
// Populate label div with sum
$(".filter-label").html(String(total));
});
Good luck!
You don't need jQuery for this task http://jsfiddle.net/72e3jLc0/
let label = document.querySelector('.filter-label');
let inputs = document.querySelectorAll('.filter-inputs input');
inputs.forEach(input => {
input.addEventListener('change', e => {
label.innerText = parseInt(label.innerText) + parseInt(input.value);
});
});
Try using the following approach:
$(document).ready(function() {
var total=0;
$("input[type='number']").change(function() {
$(".results").html("");
var objects = $(".filters").find("input[type='number']");
for (var i = 0; i < objects.length; i++) {
total += parseInt($(objects[i]).val());
}
$(".filter-label").text(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filters">
<div class="filter-label">6</div>
<div class="filter-inputs">
<input type="number" name="i1" id="i1" value="1" min="0" step="1" />
<input type="number" name="i2" id="i2" value="2" min="0" step="1" />
<input type="number" name="i3" id="i3" value="3" min="0" step="1" />
</div>
</div>
I know this is an old thread, but I would like to give my contribution.
The id can be replaced with document or "body", and input is not necessary if all your inputs have the class .form-control.
$("#id-of-overall-div-element").on("change", "input, .form-control", function () {
// Do something
});
I want to make points distribution form.
I got 4 inputs type number value 0-100 and total = 100 points. So we can put 25 points in each input. I already get it work to validate inputs number min 0 max 100 and it subtracts from total changed input value.
I have a problem with adding to Total. If user change already changed value I need to make Total + value(before change) and then Total - value(after change).
I don't know how to get value before change.
My html
<input type="number" min="0" max="100" name="1" />
<input type="number" min="0" max="100" name="2" />
<input type="number" min="0" max="100" name="3" />
<input type="number" min="0" max="100" name="4" />
<input type="text" id="Total" name="Total" value="100"/>
My script
$("input[type=number]").keyup(function(event) {
max=100;
min=0;
value=( parseInt($(this).val()));
if(value < min || isNaN(parseInt(value)))
$(this).val(0)
else if(value > max)
$(this).val(100);
else return value;
});
var total, myVal;
$("input[type=number]").change(function(event) {
maxPoints = parseInt($('#Total').val());
myVal = ( parseInt($(this).val()) || 0);
total = maxPoints - myVal;
$('#Total').val(total);
});
If i would be able to save old value to some var i would change .onchange script to something like this and i think it should work. But how i can get old value ?
$("input[type=number]").change(function(event) {
oldValue = ???? - how to get this ? :P
if(oldValue>0){
maxPoints = parseInt($('#Total').val()) + oldValue;
}else{
maxPoints = parseInt($('#Total').val());
}
myVal = ( parseInt($(this).val()) || 0);
total = maxPoints - myVal;
$('#Total').val(total);
});
There is js fiddle how it works now.
Fiddle here
Hi just save the old value like this
$("input[type=number]").change(function(event) {
oldValue = $(this).data('oldvalue');
if(oldValue>0){
maxPoints = parseInt($('#Total').val()) + oldValue;
}else{
maxPoints = parseInt($('#Total').val());
}
myVal = ( parseInt($(this).val()) || 0);
total = maxPoints - myVal;
$(this).data('oldvalue',$(this).val()) // update old value to new value
$('#Total').val(total);
});
<input type="number" min="0" data-oldvalue='0' max="100" name="1" />
<input type="number" min="0" data-oldvalue='0' max="100" name="2" />
<input type="number" min="0" data-oldvalue='0' max="100" name="3" />
<input type="number" min="0" data-oldvalue='0' max="100" name="4" />
<input type="text" id="Total" name="Total" value="100"/>