【サンプルあり】リアルタイムに値を取得/表示するスライダー(レンジバー) -コピペ可能- |【HTML】【JavaScript】

value:100

スライダーの値をリアルタイムに取得
- DEMO
- 例

スライダーの値をリアルタイムに取得

HTMLのinput要素のtype：rangeは、スライダーによる数値の指定ができます。

スライダーの値(value)をリアルタイムに取得して表示させる方法を、HTMLとJavaScriptで書き記しました。

JavaScriptにjQueryを使用しています。(推奨設置場所：headタグ内)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

DEMO

value:100

</>HTML

<input id="sample-range" max="100" min="0" type="range" value="100" /><br>
value:<span class="sample-range-result">100</span>
<script>
$("#sample-range").on("input",function(e){
    var range=e.target
    $(".sample-range-result").text(range.value)
})
</script>

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML input range</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

    <input max="100" min="0" type="range" value="100" />
    value:<span class="range-value-result">100</span>
    <script>
        $("input[type='range']").on("input", function (e) {
            var range = e.target
            $(".range-value-result").text(range.value)
        })
    </script>

</body>
</html>