問題
① rangeの最初と最後に隙間をあけたい。
❌ [0 1 2 3 4 5] = 今
⭕️ [ 0 1 2 3 4 5 ]
. ↑ ↑
ここに隙間を開ける (今は隙間がないから、端に行った時に戻しずらい(gif参照))
② 途中でボタンが潰れてしまう。(gif参照)(ボタンと軸は画像です)
現状
html
1<div id="filter"> 2 <input type="range" name="page" orient="vertical" step="20" list="pagelist" /> 3 <datalist class="pagelist"> 4 <option value="1"></option> 5 <option value="2"></option> 6 <option value="3"></option> 7 <option value="4"></option> 8 <option value="5"></option> 9 </datalist> 10</div>
css
1input[type=range]:focus { 2 outline: none; 3} 4#filter { 5 position: sticky; 6 position: -webkit-sticky; 7} 8 9#filter input[type=range][orient=vertical] { 10 writing-mode: bt-lr; /* IE */ 11 -webkit-appearance: none; 12 width: 196px; 13 position: sticky; 14 position: -webkit-sticky; 15 top: 100px; 16 -webkit-transform:rotate(90deg); 17 -moz-transform:rotate(90deg); 18 -o-transform:rotate(90deg); 19 transform:rotate(90deg); /* 90度回転 */ 20} 21/* Chrome */ 22#filter input[type=range]::-webkit-slider-runnable-track { 23 height: 13px; 24 background: url('img/jiku.svg'); 25} 26#filter input[type="range"]::-webkit-slider-thumb { 27 -webkit-appearance: none; 28 width: 16.739px; 29 height: 35px; 30 margin-top: -11px; 31 background: url('img/botan.svg') no-repeat center center; 32} 33/* Firefox */ 34#filter input[type=range]::-moz-range-track { 35 height: 13px; 36 background: url('img/jiku.svg'); 37} 38#filter input[type="range"]::-moz-range-thumb { 39 width: 16.739px; 40 height: 35px; 41 margin-top: -11px; 42 background: url('img/botan.svg') no-repeat center center; 43}
よろしくお願いします。
追記
色々提案してくださってありがとうございます!
どちらもよかったのですが、より直感的にできる 7Kreuzさん の回答をベストアンサーとさせていただきます。本当にありがとうございます!
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/12 06:44
2019/02/14 11:42
2019/02/15 22:18
2019/02/16 14:22