jquery - html range slider that shows text instead of value -
the code below shows numerical readout.
is possible have text based readout? if how go achieving 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>
well, not sure whether possible html slider might need code convert each number word , found here , applying same can below work 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 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; (var = 0; < 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 - - 1) / 3] + ' '; sk = 0; } } if (x != s.length) { var y = s.length; str += 'point '; (var = x + 1; < 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>
Comments
Post a Comment