マックス

Web

Inputの最大値が反映されないを修正する

下記サイトで使っているスライダー用のボタンはInputで制御しています。しかし、jsonからの読み込みが100を超えたあたりから、maxとvalueが等しくならず、意図しない場所に初期表示で位置していました。異なるブラウザで確認しても、おかしいのは共通です。

| 北海道コロナ週報
北海道感染症情報センターの北海道感染症情報週報を利用した北海道コロナ週報です。北海道で発生した新型コロナウイルスを地域別…
北海道コロナ週報

実装されているコードは以下。

  const horizontalSlideBar = document.querySelector('.horizontalSlideBar') as HTMLInputElement
  horizontalSlideBar.value = String(places.length - 1)
  horizontalSlideBar.max = (places.length - 1).toString()

なんとか修正したいと考え見直すも効果はありません。Copilotに聞いてみると、valueとmaxを反対にすれば良いと返答するではありませんか。そこで下記に修正することに。

  const horizontalSlideBar = document.querySelector('.horizontalSlideBar') as HTMLInputElement
  horizontalSlideBar.max = (places.length - 1).toString()
  horizontalSlideBar.value = String(places.length - 1)

すると、どうでしょう。逆にするだけで、意図した場所に初期表示が実行されました。こんなのもAIはわかってるんですね。すごい！

コメント