縦スラ
目次
Nuxt3で横スライダーを縦スライダーに変更する
北海道コロナ週実績のjsonファイルを使ったウェブサイトをNuxt3で制作する中で、ぶち当たった壁の一つ。スライダーを動かし、各保健所の値を変化させる仕様を制作。保健所の数が多く、スマホの場合、横スライダーより縦スライダーの方が操作しやすく感じたので、レスポンシブで切り替えることに。当初は簡単にできるだろうとたかをくくっていましたが、やってみると地味に大変でした。※最後にちゃぶ台返しあり。
カスタム要素を使う
最初はタグやCSSの設定でできるだろうと思い、ググると詳しい解説を発見。ドンピシャな内容です。ありがとう！ふむふむ、モダンブラザ全部に対応させるには、appearance: slider-verticalだけじゃダメなのね。そこで、rotate(45deg)させましたが、縦と横がわかりにくい上に、希望する動きになってないようなんです。そこで、下記にある通り、あらたなタグ名でカスタムすることに。
nuxt.config.tsに登録
カスタムを作っただけでは、エラーが発生します。そこで、下記にある通り、タグ名を登録します。
onMountedを準備
地味にハマったのがこれでした。システムエラーでHTMLElement is not definedが出ていて、うまく登録されていないのかと別の方をいじっていましたが、どうやらタグがレンダリングされる前にタグをいじくろうとしているのでエラーが返ってきた模様。onMountedの中に組み込むとエラーが解消しました。無事縦スラすることに成功！
実はFirefoxでも属性を加えれば縦スラ可能
無事終了と思ったら、inputにorient=”vertical”と書けば、firefoxでも縦スラできるみたいです。
結局、コード量を少なくするため、inputとinputにorient=”vertical”の2つを、スマホとPCでの表示の切り替えで実装することにしました。カスタム要素は使わなかったけど、カスタム要素の知識を深められたのはプラスです。