Html slider range that shows text instead of value
The code below shows a numeric read.
Is it possible to have a text read? if so how can i achieve this?
<label for=fader>Volume</label>
<input type=range min=0 max=100 value=50 id=fader step=1 oninput="outputUpdate(value)">
<output for=fader id=volume>50</output>
<script>
function outputUpdate(vol) {
document.querySelector('#volume').value = vol;
}
</script>
+3
source to share
1 answer
Well I'm not sure if this is possible with just html slider
, but you may need some code to convert each number to word and I found it here and applying the same thing I can say below will work for you
var th = ['', 'thousand', 'million', 'billion', 'trillion'];
var dg = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
var tn = ['ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'];
var tw = ['twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
function toWords(s) {
s = s.toString();
s = s.replace(/[\, ]/g, '');
if (s != parseFloat(s)) return 'not a number';
var x = s.indexOf('.');
if (x == -1) x = s.length;
if (x > 15) return 'too big';
var n = s.split('');
var str = '';
var sk = 0;
for (var i = 0; i < x; i++) {
if ((x - i) % 3 == 2) {
if (n[i] == '1') {
str += tn[Number(n[i + 1])] + ' ';
i++;
sk = 1;
} else if (n[i] != 0) {
str += tw[n[i] - 2] + ' ';
sk = 1;
}
} else if (n[i] != 0) {
str += dg[n[i]] + ' ';
if ((x - i) % 3 == 0) str += 'hundred ';
sk = 1;
}
if ((x - i) % 3 == 1) {
if (sk) str += th[(x - i - 1) / 3] + ' ';
sk = 0;
}
}
if (x != s.length) {
var y = s.length;
str += 'point ';
for (var i = x + 1; i < y; i++) str += dg[n[i]] + ' ';
}
return str.replace(/\s+/g, ' ');
}
function outputUpdate(vol) {
document.querySelector('#volume').value = toWords(vol);
}
<label for=fader>Volume</label>
<input type=range min=0 max=100 value=50 id=fader step=1 oninput="outputUpdate(value)">
<output for=fader id=volume>Fifty</output>
+3
source to share