JSDM

HTML

1
 
1
<input type='range' value='47'/>
!

CSS

x
 
1
$root-main-c: #a7b2b8;
2
$root-sec-c: #2b2e34;
3
4
$input-h: 7.5em;
5
6
$track-k: 20;
7
$track-bw: .25em;
8
$track-w: 25em;
9
$track-h: 1.5em;
10
$track-u: $track-w/$track-k;
11
12
$thumb-w: 2.3125em;
13
$thumb-h: 1em;
14
$thumb-r: .25em;
15
$thumb-sh-i: inset 0 0 .125em #515354;
16
$thumb-sh-o: 0 0 1px #6a7277, 0 0 .125em #6a7277;
17
$thumb-base-bg: 
18
  radial-gradient(at 70% 100%, #767c71, rgba(#767c71, 0) 70%) 
19
    no-repeat .35*$thumb-w 100% border-box, 
20
  radial-gradient(at 100% 70%, #757b80, rgba(#757b80, 0) 70%) 
21
    no-repeat 100% .35*$thumb-h border-box;
22
$thumb-sp-bg: 
23
  linear-gradient(to left top, rgba(#8f999d, .5), rgba(#b3babe, .5)) 
24
    border-box
25
  rgba($root-main-c, .5);
26
$thumb-base-s: 100% $track-bw, $track-bw 100%;
27
$thumb-sp-s: 100% 100%;
28
$thumb-fs: .6875;
29
30
$ruler-line-w: .125em;
31
$ruler-w: ($track-k - 2)*$track-u + $ruler-line-w;
32
$ruler-h: 2*$track-bw;
33
$ruler: 
34
  repeating-linear-gradient(90deg, 
35
      rgba(#7a8d9a, .75), rgba(#7a8d9a, .75) $ruler-line-w,
36
      rgba(#3c494f, .75) $ruler-line-w, rgba(#3c494f, .75) $ruler-line-w, 
37
      transparent $ruler-line-w, transparent $track-u) 
38
    no-repeat 50% 0 border-box;
39
$ruler-fs: .75;
40
41
$shape-h: 2.4375em;
42
$shape-r: .1875em;
43
$shape-l-h: $shape-r .375em .75em 1.25em $shape-h - $shape-r;
44
$shape-top-w: .8125em;
45
$shape-l-w: 
46
  $shape-r ($thumb-w - $shape-top-w)/2 - $shape-r
47
  ($thumb-w - $shape-top-w)/2 + $shape-r
48
  ($thumb-w + .0625em)/2
49
  ($thumb-w + $shape-top-w)/2 - $shape-r
50
  ($thumb-w + $shape-top-w)/2 + $shape-r $thumb-w - $shape-r;
51
$shape-start-a: 
52
  -180deg, 60deg, -180deg, -135deg, -45deg, 180deg, -60deg,  0deg,  90deg;
53
$shape-end-a:   
54
  -120deg,  0deg, -135deg,  -45deg,   0deg, 120deg,   0deg, 90deg, 180deg;
55
$shape-off: (
56
  x: 
57
    nth($shape-l-w, 1) 
58
    nth($shape-l-w, 2) 
59
    nth($shape-l-w, 3) 
60
    nth($shape-l-w, 4) 
61
    nth($shape-l-w, 5) 
62
    nth($shape-l-w, 6) 
63
    nth($shape-l-w, 7) 
64
    nth($shape-l-w, 7) 
65
    nth($shape-l-w, 1), 
66
  y: 
67
    nth($shape-l-h, 4) 
68
    nth($shape-l-h, 3) 
69
    nth($shape-l-h, 2) 
70
    nth($shape-l-h, 1) 
71
    nth($shape-l-h, 2) 
72
    nth($shape-l-h, 3) 
73
    nth($shape-l-h, 4) 
74
    nth($shape-l-h, 5) 
75
    nth($shape-l-h, 5)
76
);
77
$shape-n: 9;
78
$shape-k: $shape-r/.0625em;
79
$shape-cp: $thumb-w $shape-h, 0 $shape-h;
80
81
@for $i from 1 through $shape-n {
82
  $start-a: nth($shape-start-a, $i);
83
  $base-a: 
84
    (nth($shape-end-a, $i) - $start-a)/$shape-k;
85
  
86
  $ox: nth(map-get($shape-off, x), $i);
87
  $oy: nth(map-get($shape-off, y), $i);
88
  
89
  @for $j from 0 through $shape-k {
90
    $ca: $start-a + $j*$base-a;
91
    
92
    $shape-cp: $shape-cp, 
93
      $ox + $shape-r*cos($ca) $oy + $shape-r*sin($ca);
94
  }
95
}
96
97
@mixin track() {
98
  box-sizing: border-box;
99
  border: solid $track-bw transparent;
100
  width: $track-w; height: $track-h;
101
  border-radius: $track-h/2;
102
  box-shadow: 
103
    0 1px 1px #5e7a8b, 
104
    0 -1px 1px #688090, 
105
    inset 0 .125em .125em rgba(#5b7382, .98),
106
    inset 0 .1875em .125em rgba(#374953, .75), 
107
    inset 0 -1px #5e717c;
108
  background: 
109
    $ruler, 
110
    linear-gradient(90deg, 
111
      rgba(#526d7e, .75), rgba(#657b88, .75), 
112
      rgba(#95a2a9, .75), rgba(#889399, .75), 
113
      rgba(#a5acb0, .75), rgba(#a29e80, .75), 
114
      rgba(#cb9f74, .75), rgba(#db6e5b, .75), 
115
      rgba(#dc1026, .75)) content-box, 
116
    linear-gradient(rgba(#5b7382, .75), rgba(#909ca3, .75)) border-box;
117
  background-size: $ruler-w $track-h - $track-bw, 
118
    100% 100%, 100% 100%;
119
}
120
121
@mixin thumb($flag: false) {
122
  border-radius: $thumb-r;
123
  cursor: ew-resize;
124
  
125
  @if $flag {
126
    width: $shape-top-w; height: $shape-h;
127
    filter: 
128
      drop-shadow(0 0 1px rgba(#ddd, .98)) 
129
      drop-shadow(0 0 3px rgba(#000, .98));
130
  }
131
  @else {
132
    border: solid $track-bw transparent;
133
    width: $thumb-w;height: $thumb-h;
134
    box-shadow: 
135
      $thumb-sh-o, $thumb-sh-i;
136
    background: $thumb-base-bg, $thumb-sp-bg;
137
    background-size: $thumb-base-s, $thumb-sp-s;
138
  }
139
}
140
141
html {
142
  height: 100%;
143
  background: 
144
    radial-gradient($root-main-c, rgba($root-main-c, 0) 50%), 
145
    linear-gradient(to right bottom, #3d7195, $root-main-c, $root-sec-c);
146
}
147
148
input[type='range'] {
149
  &, 
150
  &::-webkit-slider-runnable-track, 
151
  &::-webkit-slider-thumb {
152
    -webkit-appearance: none;
153
  }
154
  
155
  position: absolute;
156
  top: 50%; left: 50%;
157
  border: solid 0 transparent;
158
  border-width: 0 1em;
159
  padding: 0;
160
  width: $track-w; height: $input-h;
161
  border-radius: .25em;
162
  transform: translate(-50%, -50%);
163
  background: $ruler;
164
  background-position: 50% ($input-h - $track-h)/2 - $ruler-h;
165
  background-size: $ruler-w $ruler-h;
166
  font-size: 1em;
167
  cursor: pointer;
168
  
169
  &::-webkit-slider-runnable-track {
170
    position: relative;
171
    @include track();
172
  }
173
  &::-moz-range-track {
174
    @include track();
175
  }
176
  &::-ms-track {
177
    @include track();
178
    color: transparent
179
  }
180
  
181
  &::-ms-fill-lower { display: none; }
182
  
183
  &::-webkit-slider-thumb {
184
    position: relative;
185
    @include thumb(true);
186
    clip-path: polygon($shape-cp);
187
  }
188
  &::-moz-range-thumb {
189
    @include thumb();
190
  }
191
  &::-ms-thumb {
192
    @include thumb();
193
  }
194
  
195
  &::-webkit-slider-runnable-track, /deep/ #track {
196
    &:before {
197
      position: absolute;
198
      bottom: calc(100% + #{$ruler-h/$ruler-fs}); left: 0;
199
      color: #798084;
200
      font: #{$ruler-fs*1em} / 2 arial, sans-serif;
201
      text-indent: 2*$track-u/$ruler-fs - 1em;
202
      word-spacing: 2*$track-u/$ruler-fs - 1.41em;
203
      text-shadow: 0 1px #d8dee2;
204
      content: '10 20 30 40 50 60 70 80 90';
205
    }
206
  }
207
  
208
  &::-webkit-slider-thumb, /deep/ #thumb {
209
    &:before, &:after {
210
      position: absolute;
211
      left: 50%;
212
      transform: translate(-50%);
213
    }
214
    &:before {
215
      box-sizing: border-box;
216
      top: 0;
217
      border: solid $track-bw transparent;
218
      border-top-width: nth($shape-l-h, 4);
219
      width: $thumb-w; height: $shape-h;
220
      box-shadow: $thumb-sh-i;
221
      background: 
222
        linear-gradient(#464b4d, #464b4d) no-repeat 47% 0 border-box, 
223
        radial-gradient(#7e8082 1px, #404446 2px, 
224
            rgba(#c3c7ca, .98) 3px, rgba(#c3c7ca, 0) 3px) 
225
          no-repeat 47% .625em border-box, 
226
        radial-gradient(at 65% 35%, #586067, rgba(#586067, 0) 70%) 
227
          no-repeat 100% 0 border-box, 
228
        $thumb-base-bg rgba($root-main-c, .98);
229
      background-size: 1px .625em, 
230
        2*$shape-r 2*$shape-r, 70% 70%, 
231
        $thumb-base-s;
232
      content: ''
233
    }
234
    .js &:after {
235
      bottom: $track-bw/$thumb-fs;
236
      color: #e9ebec;
237
      font: 600 #{$thumb-fs*1em} / 1.375 arial, sans-serif;
238
      text-shadow: 0 1px #000;
239
      content: '47°';
240
    }
241
  }
242
  
243
  &:focus {
244
    outline: none;
245
    box-shadow: 0 0 .25em grey;
246
    background-color: rgba($root-main-c, .35);
247
  }
248
}
!
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

13
 
1
var range_el = document.querySelector('input[type=range]'), 
2
    base_sel = '.js input[type=range]', 
3
    thumb_sel = ['::-webkit-slider-thumb', ' /deep/ #thumb'], 
4
    a = ':after'
5
    style_el = document.createElement('style');
6
7
document.body.appendChild(style_el);
8
9
range_el.addEventListener('input', function() {
10
  style_el.textContent = base_sel + thumb_sel[0] + a + ',' + 
11
    base_sel + thumb_sel[1] + a + '{content:"' + this.value + '°"}';
12
  console.log(style_el.textContent);
13
}, false);
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................