input rangeが、ページの途中から付いてくるようにしたい

問題

position: stickyがうまくいかない。

現状

html
1<div class="wrap">  <!-- 付いてきてほしい所 -->
2
3<!-- スライドバー -->
4<div id="filter">
5  <input type="range" name="page" orient="vertical" step="20" list="pagelist" />
6    <datalist class="pagelist">
7      <option value="1"></option>
8      <option value="2"></option>
9      <option value="3"></option>
10      <option value="4"></option>
11      <option value="5"></option>
12    </datalist>
13</div>  <!-- /スライドバー -->
14
15<!-- 一覧（他要素） -->
16 <div class="list">
17 <section class="item">
18~
19 </section>
20 <section class="item">
21~
22 </section>
23 <section class="item">
24~
25 </section>
26 </div>  <!-- /一覧（他要素） -->
27</div>  <!-- /付いてきてほしい所 -->

↑つまり、他要素の「一覧」の所でスライドバーが付いてきてほしい

css
1/* 一覧 */
2.wrap {
3  width: 100%;
4  height: 1421px; 　/* 「listの終わりまで」にしたい */
5}
6
7/* 【 スライドバー 】 */
8input[type=range]:focus {
9  outline: none;
10}
11#filter input[type=range][orient=vertical] {
12  writing-mode: bt-lr;  /* IE */
13  -webkit-appearance: none;
14  width: 196px;
15  position: sticky;
16  position: -webkit-sticky;
17  top: 100px;　/* 上下の真ん中に置きたい */
18  -webkit-transform:rotate(90deg);
19  -moz-transform:rotate(90deg);
20  -o-transform:rotate(90deg);
21  transform:rotate(90deg);　　/* 90度回転 */
22}
23/* Chrome */
24#filter input[type=range]::-webkit-slider-runnable-track {
25  height: 13px;
26  background: url('img/jiku.svg');
27  /* position: absolute; */
28}
29#filter input[type="range"]::-webkit-slider-thumb {
30  -webkit-appearance: none;
31  width: 16.739px;
32  height: 35px;
33  margin-top: -11px;
34  background: url('img/botan.svg') no-repeat center center;
35  /* position: absolute; */
36}
37/* Firefox */
38#filter input[type=range]::-moz-range-track {
39  height: 13px;
40  background: url('img/jiku.svg');
41  /* position: absolute; */
42}
43#filter input[type="range"]::-moz-range-thumb {
44  width: 16.739px;
45  height: 35px;
46  margin-top: -11px;
47  background: url('img/botan.svg') no-repeat center center;
48  /* position: absolute; */
49}