IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

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

Photo by Anthony Roberts on Unsplash

Photo by Anthony Roberts on Unsplash


value:100

 

 

 

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

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 

 

 

 

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