縦 input rangeが動かない

Question

問題

90°回転させて縦にしてたのですが、効果を加えるのに難があったので元から縦にしようと、←を見て縦にしました。
でも、動きません。（ボタンや軸は画像です）
どうしてでしょうか…？ TT

このように、ボタンを触ると横にピッと動くだけで、あとは横にも縦にも動きません。
ボタンや軸を画像にするのは←を参考にしました。

現状

<div id="filter">
  <input type="range" name="page" orient="vertical" step="20" list="pagelist" />
    <datalist class="pagelist">
      <option value="1"></option>
      <option value="2"></option>
      <option value="3"></option>
      <option value="4"></option>
      <option value="5"></option>
    </datalist>
</div>

input[type=range]:focus {
  outline: none;
}
#filter {
  position: sticky;
  position: -webkit-sticky;
  top: 250px;
  left: 57px;
  width: 13px;
  height: 196px;
  float: left;
  background: url('jiku.svg');
}

#filter input[type=range][orient=vertical] {
  writing-mode: bt-lr;  /* IE */
  -webkit-appearance: none;
  width: 13px;
}
/* Chrome */
#filter input[type=range][orient=vertical]::-webkit-slider-runnable-track {
  height: 150px;
}
#filter input[type="range"][orient=vertical]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 35px;
  height: 16.739px;
  background: url('botan.svg') no-repeat center center;
}
/* Firefox */
#filter input[type=range]::-moz-range-track {
  height: 150px;
}
#filter input[type="range"]::-moz-range-thumb {
  width: 35px;
  height: 16.739px;
  background: url('botan.svg') no-repeat center center;
}

よろしくお願いします。

Answer 1

firefoxならそのままで動きます……よね？
chromeに関しては、（追記）↓ではダメです

#filter input[type=range][orient=vertical]{
  -webkit-appearance: slider-vertical;
}

この辺はブラウザごとの差異が激しいようなので、rotateするのとどちらがいいのかは難しいところですね……

（追記）
この場合-webkit-appearanceはnoneでなければいけないので回答は誤りでした。申し訳ないです。
そうなると、transformで回転させるほうが良さそうです。位置調整などが難しいのは理解できますが……。
前の質問の回答を編集しましたので、そちらを試してみてください。

Comments

[EXIT]

ありがとうございます。
firefoxは持ってないのでわかりません笑

それで動きました！
でも、デフォルトの感じになってしまって、画像が消えてしまいます…TT

90°回転のやつも画像の扱いが難しい&位置調整も不便だったので、なるべくそのまま縦で動かしたいのですがTT

[EXIT]

追記ありがとうございます。
やっぱ回転なんですね…
あれから英語で調べてもこの問題は解決してない & スタイルされた縦rengeは全部90°かJSだったので薄々感じてはいましたが…(´･_･`)笑
ありがとうございます、試してみます。