UNPKG

@atlaskit/range

Version:

A range lets users choose an approximate value on a slider.

atlassian.design/components/range/

90 lines • 5.82 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
._108m1rr0::-moz-range-thumb{border-radius:var(--ds-radius-full,9999px)} ._10lridpf::-webkit-slider-runnable-track{border:0} ._14mj1rr0:after{border-radius:var(--ds-radius-full,9999px)} ._15raidpf::-moz-focus-outer{border:0} ._1gvo1rr0::-moz-range-track{border-radius:var(--ds-radius-full,9999px)} ._1kdl1rr0::-webkit-slider-thumb{border-radius:var(--ds-radius-full,9999px)} ._1nx42hjt::-moz-range-track{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out} ._1rf3bpmo::-moz-range-thumb{outline:solid var(--ds-border-width-selected,2px) var(--thumb-border)} ._1tcb2hjt::-moz-range-progress{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out} ._1yeu2hjt::-moz-range-thumb{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out} ._1yq0glyw::-moz-range-thumb{border:none} ._1yz62hjt::-webkit-slider-thumb{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out} ._37yw1rr0::-moz-range-progress{border-radius:var(--ds-radius-full,9999px)} ._37ywlb4i::-moz-range-progress{border-radius:var(--ds-radius-xsmall,2px)} ._e8hnidpf::-moz-range-progress{border:0} ._g6td1rr0::-webkit-slider-runnable-track{border-radius:var(--ds-radius-full,9999px)} ._h2ksglyw::-webkit-slider-thumb{border:none} ._m8f8bpmo::-webkit-slider-thumb{outline:solid var(--ds-border-width-selected,2px) var(--thumb-border)} ._ru37idpf::-moz-range-track{border:0} ._vi4t2hjt::-webkit-slider-runnable-track{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out} ._10o7tlke::-moz-range-thumb{cursor:pointer} ._12el1w0t::-moz-range-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#292a2e))} ._142y1y44::-moz-range-track{height:4px} ._14h1b1q9{--thumb-shadow:var(--ds-UNSAFE-transparent,transparent)} ._15dp1vck{--track-bg:var(--ds-background-inverse-subtle,#00000029)} ._15dpi8nm{--track-bg:var(--ds-background-neutral,#0515240f)} ._168l1y44::-webkit-slider-runnable-track{height:4px} ._168li2wt::-webkit-slider-runnable-track{height:6px} ._18k7v77o::-webkit-slider-thumb{outline-offset:var(--ds-space-025,2px)} ._18lx1aqn{--track-fg:var(--ds-background-neutral-bold,#292a2e)} ._18lxof27{--track-fg:var(--ds-background-neutral-bold-pressed,#505258)} ._18postnw:after{position:absolute} ._18tdtlke::-webkit-slider-runnable-track{cursor:pointer} ._19nq1ssb:after{inset-block-start:50%} ._1bdkusvi::-webkit-slider-thumb{box-sizing:border-box} ._1bsb1osq{width:100%} ._1cdcglyw::-webkit-slider-thumb{-webkit-appearance:none} ._1d8tmgnk::-webkit-slider-runnable-track{background-repeat:no-repeat} ._1drqof27{--thumb-bg:var(--ds-background-neutral-bold-pressed,#505258)} ._1esf1w0t::-webkit-slider-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#292a2e))} ._1f5t1osq::-moz-range-track{width:100%} ._1fov13gf:disabled::-moz-range-progress{cursor:not-allowed} ._1g2h1osq::-webkit-slider-runnable-track{width:100%} ._1g741hsc::-webkit-slider-runnable-track{background-image:linear-gradient(var(--track-fg),var(--track-fg))} ._1hfkof27:after{background-color:var(--ds-background-neutral-bold-pressed,#505258)} ._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)} ._1j70pxbi::-webkit-slider-thumb{height:var(--ds-space-200,1pc)} ._1jhc1ibz:hover:not(:disabled){--track-fg:var(--ds-background-neutral-bold-hovered,#3b3d42)} ._1kd2i2wt::-moz-range-progress{height:6px} ._1kzev77o::-moz-range-thumb{outline-offset:var(--ds-space-025,2px)} ._1mn5pxbi::-moz-range-thumb{height:var(--ds-space-200,1pc)} ._1oqe1ik2::-moz-range-thumb{box-shadow:var(--thumb-shadow)} ._1p201osq:dir(rtl)::-webkit-slider-runnable-track{background-position:100%} ._1peq2wxo:after{opacity:var(--ds-opacity-disabled,.4)} ._1qdg1y44:after{height:4px} ._1rucof27:active:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-pressed,#505258)} ._1sdc196n::-webkit-slider-thumb{margin-block-start:var(--ds-space-negative-075,-6px)} ._1sdc1lpd::-webkit-slider-thumb{margin-block-start:-5px} ._1ssqtlke::-moz-range-progress{cursor:pointer} ._1vq313gf:disabled::-moz-range-thumb{cursor:not-allowed} ._1yte13gf:disabled::-webkit-slider-thumb{cursor:not-allowed} ._1ywu1ule:after{display:block} ._34m613gf:disabled::-moz-range-track{cursor:not-allowed} ._4t3i1ylp{height:40px} ._4w431ik2::-webkit-slider-thumb{box-shadow:var(--thumb-shadow)} ._5i7a13gf:disabled::-webkit-slider-runnable-track{cursor:not-allowed} ._9u3f2hce::-webkit-slider-runnable-track{background-color:var(--track-bg)} ._aetrb3bt:after{content:""} ._aoww1osq::-moz-range-progress{width:100%} ._b3fmtlke::-moz-range-track{cursor:pointer} ._bfhk1j28{background-color:transparent} ._d7w62hce::-moz-range-track{background-color:var(--track-bg)} ._g0nfo1yi:after{inset-inline-start:calc(100% - 3px)} ._g4ppusvi::-moz-range-thumb{box-sizing:border-box} ._j5dh13gf:disabled{cursor:not-allowed} ._jxar1ibz:hover:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-hovered,#3b3d42)} ._kqswh2mm{position:relative} ._np53xlkz::-webkit-slider-runnable-track{background-size:var(--track-fg-width) 100%} ._r763pxbi::-moz-range-thumb{width:var(--ds-space-200,1pc)} ._u98zpxbi::-webkit-slider-thumb{width:var(--ds-space-200,1pc)} ._vt2s1w6o::-moz-range-progress{background-color:var(--track-fg)} ._wstuglyw{-webkit-appearance:none} ._ydqgmpja:hover:not(:disabled){--track-bg:var(--ds-background-inverse-subtle-hovered,#0000003d)} ._ydqgplhp:hover:not(:disabled){--track-bg:var(--ds-background-neutral-hovered,#0b120e24)} ._yfyntlke::-webkit-slider-thumb{cursor:pointer} ._z0ai1y44:after{width:4px} ._1hvw1o36:focus{outline-width:medium} ._49pcglyw:focus{outline-style:none} ._nt751r31:focus{outline-color:currentColor} ._164c1v1w:focus-visible{--thumb-border:var(--ds-border-focused,#4688ec)}