今回はWebサービスを開発している途中に作ったHTMLのinput、range要素を使って文字のサイズを変更するものを紹介していきたいと思います。一旦デモをどうぞ。
ここの文字のサイズが変わります。
10
HTML
まずはHTMLを少し書きます。
<p id="p">ここの文字のサイズが変わります。</p>
<input type="range" min="0" max="100" step="1" id="slider" value="10">
<p id="value-display">10</p>
ちょっと説明
idがpの部分の文字が変わるようにしています。idじゃなくてclassで指定しても大丈夫です。
input
先述したとおりinput要素のrangeを使用しています。これでスライダーを表示できます。
<input type="range" min="0" max="100" step="1" id="slider" value="10">
inputの中身を説明します。
minとmaxはスライダー内の最小値と最大値を表しています。この場合は最小が0、最大が100です。
stepは動かす際にいくつずつ動かすかというものです。
今回は1なので、1、2、3、4、5、6...と出来ます。
5にすると、5、10、15、20、25...となります。
valueは最初にどの数値を選択しておくかを指定しています。この場合は10なので最初に10の部分においてあります。なにも指定しなければ中央になります。
id=value-displayの部分は現在の値を表示する場所です。中の数値はinputで指定したvalueの値を入れておきましょう。
JavaScript
今回はjQueryを使うのでファイルを読み込んでおいてください。
$('#slider').on('input', function () { //input要素
let val = $(this).val();
$('#value-display').html(val); //現在の値表示部
document.getElementById('p').style.fontSize = val +'px' //サイズを変更される要素
});
これで完成です！
あとは勝手にカスタマイズして
参考サイト
1-notes.com