jquery - 显示文本而不是值的 html 范围 slider

Question

下面的代码显示了一个数字读数。

是否可以有基于文本的读数？如果是这样，我将如何实现这一目标？

<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>

Answer 1

好吧，我不确定仅使用 html slider 是否可行，但您可能需要一些代码将每个数字转换为单词，我发现它 here 并应用我可以在下面说的相同内容对您有用

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>