Slider to show a word based on a value - javascript

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
}

Related

Update Input field value with value from a range slider using javascript

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>

Change value on event oninput typescript

I have a span that I want to change in according to a value from an input on the event oninput
Here is my html :
<div class="slidecontainer">
<input type="range" min="1" max="1000" value="50" class="slider" id="myRange" step="3" class="myRange">
<p>Value: <span id="demo"></span></p>
<p>Gain de temps: <span id="time"></span></p>
</div>
My typescript file :
var slider = document.getElementById("myRange") as HTMLInputElement;
var output = document.getElementById("demo");
output.innerHTML = slider.value;
var convertSlider = parseInt(slider.value);
var gainTime = Math.round(convertSlider * 4* (1 - Math.min(convertSlider, 200) * 40 / 10000)).toString();
var gainTimeOutput = document.getElementById("time");
gainTimeOutput.innerHTML = gainTime;
slider.oninput = e => {
output.innerHTML = ((<HTMLTextAreaElement>e.target).value);
gainTimeOutput.innerHTML = gainTime;
};
With this solution, I have the value in my span #time but it doesn't change when I move the value of the slider, how to catch the event to also make change the value of my span #time ?
I don't know what you're trying to do with this code: output.innerHTML = ((<HTMLTextAreaElement>e.target).value); But to accomplish what you described the assignment should rather be to the value of the slider.
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var gainTimeOutput = document.getElementById("time");
slider.oninput = e => {
output.innerHTML = slider.value;
var convertSlider = parseInt(slider.value);
var gainTime = Math.round(convertSlider * 4* (1 - Math.min(convertSlider, 200) * 40 / 10000)).toString();
gainTimeOutput.innerHTML = gainTime;
};
<div class="slidecontainer">
<input type="range" min="1" max="1000" value="50" class="slider myRange" id="myRange" step="3">
<p>Value: <span id="demo"></span></p>
<p>Gain de temps: <span id="time"></span></p>
</div>
I think you have to put onChange attribute to your input, so it can change its value
something like:
<input type="range" min="1" max="1000" value="50" onChange="handleInputChange()" class="slider" id="myRange" step="3" class="myRange" />
and in your script, put your code into a function
funtion handleInputChange() {
console.log("hello")
// your logic
}

input type range with specific numbers

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>

How to get the value of a range slider?

Can you please help me how to get values of a range slider in javascript?
<script>
$(function()
{
$('.slider').on('input change', function(){
$(this).next($('.slider_label')).html(this.value);
});
$('.slider_label').each(function(){
var value = $(this).prev().attr('value');
$(this).html(value);
});
})
</script>
<p><label for="range_size">Size: </label> <input type="range" name="size" class="slider" min="1" max="75" value="45">
<span class="slider_label"></span></p>
<p><label for="range_width">Width: </label> <input type="range" name="width" class="slider" min="1" max="6" value="1">
<span class="slider_label"></span></p>
I am trying to get like this :
<script type="text/javascript">
function calculate () {
var size = document.getElementById ("size").value;
alert(size);
</script>
But it doesn't show any alert. Can you please help me?
Using value does work :
let p = document.getElementById("val")
let range = document.getElementById("slide")
let changeVal = () => {
p.textContent = range.value
}
changeVal()
range.onchange = changeVal
<input id="slide" type="range" min="0" max="100"/><p id="val"></p>
as B001ᛦ said in comment the problem is you forgot to add an id on your <input>
If you prefer you can also use names but you need to take care as name can be reused while Ids are unique
let p = document.getElementsByName("val")[0]
let range = document.getElementsByName("slide")[0]
let changeVal = () => {
p.textContent = range.value
}
changeVal()
range.onchange = changeVal
<input name="slide" type="range" min="0" max="100"/><p name="val"></p>
getElementsByName return a NodeList so you'll need to get the node you need from this list (the first one if you have only one)
as a side note value does exists on every input type

Save the values in array (and override for each update)

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

Categories

Resources