Number and range

by int32_t

HTML

<form action="">
  <label>数値: <input type=number min=0 max=999999 step=10 name=number1></label>
    <label>評価: <input type=range min=1 max=5 name=eval value=3 onchange="updateRangeValue(this)"> <span id=console>どちらでもない</span> </label>
  <input type=submit style="-webkit-appearance:square-button">
</form>

CSS

body {
    zoom: 1;
}

:invalid {
    background-color: red;
}

label {
    display: block;
}

JavaScript

function updateRangeValue(range) {
    var text = "";
    switch (range.value) {
    case "1":
        text = "すごく悪い";
        break;
    case "2":
        text = "悪い";
        break;
    case "3":
        text = "どちらでもない";
        break;
    case "4":
        text = "よい";
        break;
    case "5":
        text = "たいへんよい";
        break;
    }
    document.getElementById('console').textContent = text;
}