I have an input type range which is Min of 0 and Max of 100
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange" >
<input type="text" id="rangeValue">
</div>
And my JS
var slider = document.getElementById("myRange");
var output = document.getElementById("rangeValue");
$(output).val(slider.value);
slider.oninput = function() {
$(output).val(slider.value);
}
And it working:
But, what I want to happen is not all range 1-100. But when you try to scroll it, it will only show specific numbers, not all numbers between 1-100. For example. 10, 25 ,50 , 65 , 82, 88, 90, 98 , 100 only
Having trouble with this. Thank you
Well, you have two possibilities:
You can use the step attribute on your input to define a specific granularity
If you want a specific step between your values, you can define a datalist linked to your slider (eg. https://developer.mozilla.org/fr/docs/Web/HTML/Element/datalist)
<input type="range" list="tickmarks">
<datalist id="tickmarks">
<option value="10">
<option value="25">
<option value="50">
<option value="65">
<option value="82">
<option value="88">
<option value="90">
<option value="98">
<option value="100">
</datalist>
You could map your slider values to an array although it breaks the intuitive nature of the UI a little...
<div class="slidecontainer">
<input type="range" min="0" max="8" value="4" class="slider" id="myRange" >
<input type="text" id="rangeValue">
</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("rangeValue");
var vals =[10, 25 ,50 , 65 , 82, 88, 90, 98 , 100];
$(output).val(vals[slider.value]);
slider.oninput = function() {
$(output).val(vals[slider.value]);
}
</script>
All you need for this is the step attribute on your input element:
var slider = document.getElementById("myRange");
var output = document.getElementById("rangeValue");
$(output).val(slider.value);
slider.oninput = function() {
$(output).val(slider.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer">
<input type="range" min="0" max="100" step="5" value="50" class="slider" id="myRange" >
<input type="text" id="rangeValue">
</div>
(See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number)
Actually yes you can use the step or list attributes, but this is not enough to validate the entered value.
You need to use a certain validation control along with the datalist and the list attribute, and when the value is out of range just reset it.
let values = Array.from($("#values option")).map(v => +v.value);
slider.oninput = function(e) {
//Check wether the inputted value is in the range of values
if (values.some(val => val == slider.value)) {
$(output).val(slider.value);
} else {
slider.value = 0;
}
}
Demo:
var slider = document.getElementById("myRange");
var output = document.getElementById("rangeValue");
$(output).val(slider.value);
let values = Array.from($("#values option")).map(v => +v.value);
slider.oninput = function(e) {
if (values.some(val => val == slider.value)) {
$(output).val(slider.value);
} else {
slider.value = 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange" list="values">
<input type="text" id="rangeValue">
<datalist id="values" style="display:none;">
<option value="10">
<option value="20">
<option value="30">
<option value="50">
<option value="65">
<option value="80">
<option value="100">
</datalist>
</div>
You have to make a custom function for that
var slider = document.getElementById("myRange");
var output = document.getElementById("rangeValue");
var arr = [10, 25, 50, 65, 82, 88, 90, 98, 100];
var ele = document.querySelector('.slider')
ele.setAttribute('step', arr[0]);
var i = 0;
function a() {
ele.removeAttribute('step')
var value = ele.value
for (i = 0; i < arr.length; i++) {
if (arr[i] > value) {
ele.value = arr[i]
break;
}
}
document.querySelector('span').innerHTML = ele.value
}
<div class="slidecontainer">
<input type="range" min="0" max="100" step="5" value="50" class="slider" id="myRange" onchange="a()">
</div>
<span>0</span>
Related
I'm trying to modify a how-to example which I got from W3Schools
The example is a range slider which display the value of the slider inside a <span>
tag
What I would like to do is display the value inside an input field
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
Source: W3Schools range slider example
I would like to display the value inside an input field instead of the <span>
tag so I have tried to modify the example:
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<input type="number" id="demo" name="fname" value="">
</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo").value = slider.value;
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
but this doesn't work as it only display the initial value and does not update if I move the slider knob
You can store the element's reference in the output var & instead of innerHTML you could just use the value attribute.
Here's the updated code for your reference:
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.value = slider.value;
slider.oninput = function() {
output.value = this.value;
}
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<input type="number" id="demo" name="fname" value="">
</div>
setting an onchange function on the range onchange="myfunction()"so this function will be called every time you change the slider.
inside the function setting demo.value to slider.value
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
function myfunction() {
demo.value = slider.value
}
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange" onchange="myfunction()">
<input type="number" id="demo" name="fname" value="">
</div>
I would like for the code to change its answer when I change the value of the input.
So let's say instead of 10, I would like it to tell me how much HP (health points) I will have at level 15. Is there any way I can do this? I'm not that experienced in Javascript.
So right now I coded it to default to 10 on all stats. My website tells me that at level 10, I have 895.4 hp. The only problem is that it won't stay at 15 when I try to press enter. It will just revert back to 10. Pretty much useless. Is there any way to keep that number 15 when I press enter?
var finalhp = 500;
let hpmultiplier = 1.06;
var hpvaluestring = document.querySelector('.hp').value;
var hpvalue = parseInt(hpvaluestring);
for (let i = 0; i < hpvalue; i++) {
var finalhp = finalhp * hpmultiplier
}
console.log(finalhp)
<form>
<div>
<input class="hp" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
Add a form submit event listener to the form element and prevent form submission there.
<form onsubmit="submitForm(event)">
<div>
<input class="hp" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
Add a submitForm function inside a script tag
function submitForm(event){
event.preventDefault();
var finalhp = 500;
let hpmultiplier = 1.06;
var hpvaluestring = document.querySelector('.hp').value;
var hpvalue = parseInt(hpvaluestring);
for (let i = 0; i < hpvalue; i++) {
var finalhp = finalhp * hpmultiplier
}
console.log(finalhp)
}
So mainly I'm just adding eventListeners to trigger the function calculateHP on input/slider value change. The function calculateHP contains the same logic that you shared. I did this so that the eventListeners can callback the function.
Try the following:
const input = document.querySelector('.hp')
const slider = document.querySelector('.slider')
slider.addEventListener('change', calculateHP)
input.addEventListener('change', calculateHP)
function calculateHP(){
let multiplier = 1.06
let level = Number(input.value)
let HP = 500
for(let i = 0; i<level; i++){
HP = HP * multiplier
}
return console.log(HP)
}
<div>
<label>Level: </label>
<input class="hp" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
I have a slider that displays the active value beneath it. How do I change it from showing a number to showing a word depending on what the active value is?
Is it possible to change the value "1" to be the word "One"?
Here is the fiddle: https://jsfiddle.net/orv5sety/
Below is all I have:
HTML:
<input type="range" min="1" max="5" value="1" id="myRange">
<p><span id="demo"></span></p>
JS:
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
Any help would be greatly appreciated!
simply that
const nStr = 'zero one two three four five'.split(' ')
demo.textContent = nStr[ myRange.valueAsNumber ]
myRange.oninput=_=>
{
demo.textContent = nStr[ myRange.valueAsNumber ]
}
<input type="range" min="1" max="5" value="1" id="myRange" step="1">
<p id="demo"> </p>
You would need to have a mechanism to match the numeric value to the word representation - I would do it with an array and pass the numeric value to a function that returns the numeric string value.
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = numberToString(slider.value);
slider.oninput = function() {
output.innerHTML = numberToString(this.value);
}
function numberToString(num) {
const numberStrings = ['One', 'Two', 'Three', 'Four', 'Five'];
return numberStrings[num-1]
}
<input type="range" min="1" max="5" value="1" id="myRange">
<p><span id="demo"></span></p>
Yet another...
<input type="range" min="1" max="5" value="1" id="myRange" oninput="demo.innerHTML=['One','Two','Three','Four','Five'][Number(this.value)-1];">
<p><span id="demo">One</span></p>
You should be able to achieve this by using the datalist element for the input type "range".
<input type="range" value="0" min="0" max="4" list="tickmarks" id="myRange">
<datalist id="tickmarks">
<option value="0" label="One">One</option>
<option value="1" label="Two">One</option>
<option value="2" label="Three">Two</option>
<option value="3" label="Four">Three</option>
<option value="4" label="Five">Four</option>
</datalist>
<p><span id="demo"></span></p>
Then you can pass the values using a simple function like you have written; selecting the option value by label:
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var datalist = document.getElementById("tickmarks").options
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = datalist[this.value].label
}
I'm trying to display values of every slider I have on my page, this is my code so far:
var i = 0;
var st = 'slider';
var ot = 'output';
var s = '';
var o = '';
for (var x = 0; x < 3; x++) {
i++;
s = st+i;
o = ot+i;
var s = document.getElementById("range"+i);
var o = document.getElementById("limit"+i);
o.innerHTML = s.value;
s.oninput = function() {
o.innerHTML = this.value;
}
}
<div id="slidecontainer">
<input type="range" min="2" max="50" value="20" class="slider" id="range1" >
<label>You chose <span id="limit1"></span></label>
</div>
<div id="slidecontainer">
<input type="range" min="2" max="50" value="20" class="slider" id="range2" >
<label>You chose <span id="limit2"></span></label>
</div>
<div id="slidecontainer">
<input type="range" min="2" max="50" value="20" class="slider" id="range3" >
<label>You chose <span id="limit3"></span></label>
</div>
It's only changing the last value when I move any slider, I want to display the value of each slider respectively. I'm using a loop in my JavaScript code because I have more than 20 sliders and I don't want to write a function for each of them unless that is the only way of doing it. Any suggestions?
The problem you are having is related to variable scope. There is only one variable named o, each iteration of the loop changes this variable. So when the
oninput function is evaluated o equals the last value you set it to equal. The current value of o is not "saved" in the function definition.
See https://www.w3schools.com/js/js_scope.asp for more information.
See solution below, here I find the limit in each call to the function.
function updateLabel() {
var limit = this.parentElement.getElementsByClassName("limit")[0];
limit.innerHTML = this.value;
}
var slideContainers = document.getElementsByClassName("slidecontainer");
for (var i = 0; i < slideContainers.length; i++) {
var slider = slideContainers[i].getElementsByClassName("slider")[0];
updateLabel.call(slider);
slider.oninput = updateLabel;
}
<div class="slidecontainer">
<input type="range" min="2" max="50" value="20" class="slider">
<label>You chose <span class="limit"></span></label>
</div>
<div class="slidecontainer">
<input type="range" min="2" max="50" value="20" class="slider">
<label>You chose <span class="limit"></span></label>
</div>
<div class="slidecontainer">
<input type="range" min="2" max="50" value="20" class="slider">
<label>You chose <span class="limit"></span></label>
</div>
I'm having the trouble with saving the values as array.
I have such HTML code:
<div id="cn1" class="container cont container4">
<input id="slider1" type="range" class="slider slider1" min="0" max="5" value="1" step="1">
<input id="slider2" type="range" class="slider slider2" min="0" max="5" value="1" step="1">
<input id="slider3" type="range" class="slider slider3" min="0" max="5" value="1" step="1">
<input id="slider4" type="range" class="slider slider4" min="0" max="5" value="1" step="1">
<input id="slider5" type="range" class="slider slider5" min="0" max="5" value="1" step="1"></div>
5 containers with 5 sliders inside = 25 sliders.
Need to get the id and values for each sliders and save as
"sliders":[
{
"slider":"slider1",
"value":"1"
},
{
"slider":"slider2",
"value":"1"
}...
]
Here is the script to get the values for each slider:
slider = $('.slider');
var len = slider.length;
$(slider).change(function () {
bt = $(this).attr('id');
value = $(this).val();
save = '{"slider":"' + bt + '", "value":"' + value + '"}';
console.log('save', save);
})
.trigger('change');
}
So, i see in console 'save' for each slider.
I need to write each 'save' as array of values, then this data with be saved in json file and used for the other page.
I'm trying
function saveValues(){
var toSave = '"slide10" : {';
toSave += '"sliders":[';
for (var i=1;i<len;i++) {
toSave +=''+save+',';
}
toSave+=']';
return toSave+='}';
}
But it save the value for the last 'save' 25 times... :( Like this:
"sliders":[
{
"slider":"slider25",
"value":"1"
},
{
"slider":"slider25",
"value":"1"
}...
]
How can I save the values in array (and override for each change of the value of corresponding slider)?
You can do something like this:
//get all range type's
var sliders = document.querySelectorAll('[type="range"]');
//prepare array variable
var result = [];
//loop the sliders
for(var i=0, l=sliders.length; i < l; i++){
var slider = sliders[i];
//push the object with id and value in the array
result.push({
slider: slider.id,
value: slider.value
});
}
//display the result :)
console.log(result);
jsfiddle