DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix(slider): made look on broswers (firefox) consistent

This commit is contained in:
perry-C 2021-08-20 19:00:19 +08:00
parent a28c452b8e
commit 7bce2eb3e8
8 changed files with 114 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/docs-src/src/docs/en/slider.md
View File

@ -37,7 +37,7 @@ Or use script tag to ref it.
step?: number
value?: number
second_value?: number
size: 'slim' | 'normal' | 'large'
size: 'small' | 'normal' | 'large'
range: 'single' | 'double'
orient?: 'vertical' | 'horizontal'
shape: 'square' | 'round'

2
components/docs-src/src/docs/zh-cn/slider.md
View File

@ -38,7 +38,7 @@ import '@omiu/slider'
step?: number
value?: number
second_value?: number
size: 'slim' | 'normal' | 'large'
size: 'small' | 'normal' | 'large'
range: 'single' | 'double'
orient?: 'vertical' | 'horizontal'
shape: 'square' | 'round'

2
components/slider/README.md
View File

@ -34,7 +34,7 @@ Or use script tag to ref it.
step?: number
value?: number
second_value?: number
size: 'slim' | 'normal' | 'large'
size: 'small' | 'normal' | 'large'
range: 'single' | 'double'
orient?: 'vertical' | 'horizontal'
shape: 'square' | 'round'

43
components/slider/index.html
View File

@ -19,45 +19,45 @@
</a>
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
<div style="text-align: center">basic slider</div>
<o-slider min="0" max="10" value="2" id="single-range-demo"></o-slider>
<o-slider min="0" max="100" value="20" id="single-range-demo"></o-slider>
<div style="text-align: center">reversed slider</div>
<o-slider
min="0"
max="10"
value="5"
max="100"
value="50"
reversed
id="single-reversed-range-demo"
></o-slider>
<div style="text-align: center">large slider</div>
<o-slider
min="0"
max="10"
value="5"
max="100"
value="50"
size="large"
id="large-single-range-demo"
></o-slider>
<div style="text-align: center">slim slider</div>
<div style="text-align: center">small slider</div>
<o-slider
min="0"
max="10"
max="100"
value="5"
size="slim"
id="slim-single-range-demo"
size="small"
id="small-single-range-demo"
></o-slider>
<div style="text-align: center">single slider with tool-tip</div>
<o-slider
min="0"
max="10"
value="2"
max="100"
value="20"
tooltip
id="single-range-demo"
></o-slider>
<div style="text-align: center">double slider with tool-tip</div>
<o-slider
min="0"
max="10"
value="2"
second_value="10"
max="100"
value="20"
second_value="100"
range="double"
tooltip
id="double-range-demo"
@ -65,23 +65,23 @@
<div style="text-align: center">square slider</div>
<o-slider
min="0"
max="10"
value="2"
max="100"
value="20"
shape="square"
id="square-single-range-demo"
></o-slider>
<div style="text-align: center">disabled slider</div>
<o-slider
min="0"
max="10"
value="2"
max="100"
value="20"
disabled
id="disabled-single-range-demo"
></o-slider>
<div style="text-align: center">double slider</div>
<o-slider
min="0"
max="200"
max="100"
value="20"
second_value="70"
range="double"
@ -90,7 +90,7 @@
<div style="text-align: center">disabled double slider</div>
<o-slider
min="0"
max="200"
max="100"
value="20"
second_value="70"
range="double"
@ -99,11 +99,10 @@
></o-slider>
<div style="position: absolute">vertical single slider</div>
<div style="position: absolute; left: 175px">vertical double slider</div>
<o-slider
min="0"
max="100"
value="10"
value="100"
orient="vertical"
id="vertical-demo"
style="

130
components/slider/src/index.css
View File

@ -22,6 +22,11 @@
z-index: -1;
border-radius: 8px;
}
@supports (-moz-appearance: none) {
.slider-container .slider-track {
top: 4px;
}
}
.slider-container .o-slider {
-webkit-appearance: none;
@ -52,12 +57,11 @@
height: 4px;
}
.slider-container .o-slider::-webkit-slider-thumb {
top: 50%;
position: relative;
width: 14px;
height: 14px;
position: relative;
z-index: 2;
margin-top: -9px;
margin-top: -7px;
border: 2px solid #07c160;
border-radius: 50%;
background-color: #ffffff;
@ -74,12 +78,11 @@
border-color: #059048;
}
.slider-container .o-slider::-moz-range-thumb {
top: 50%;
position: relative;
width: 14px;
height: 14px;
position: relative;
z-index: 2;
margin-top: -9px;
margin-top: -7px;
border: 2px solid #07c160;
border-radius: 50%;
background-color: #ffffff;
@ -96,12 +99,11 @@
border-color: #059048;
}
.slider-container .o-slider::-ms-thumb {
top: 50%;
position: relative;
width: 14px;
height: 14px;
position: relative;
z-index: 2;
margin-top: -9px;
margin-top: -7px;
border: 2px solid #07c160;
border-radius: 50%;
background-color: #ffffff;
@ -123,12 +125,11 @@
}
.is-square .o-slider::-webkit-slider-thumb {
top: 50%;
position: relative;
width: 14px;
height: 14px;
position: relative;
z-index: 2;
margin-top: -9px;
margin-top: -7px;
border: 2px solid #07c160;
border-radius: 50%;
background-color: #ffffff;
@ -146,12 +147,11 @@
border-color: #059048;
}
.is-square .o-slider::-moz-range-thumb {
top: 50%;
position: relative;
width: 14px;
height: 14px;
position: relative;
z-index: 2;
margin-top: -9px;
margin-top: -7px;
border: 2px solid #07c160;
border-radius: 50%;
background-color: #ffffff;
@ -169,12 +169,11 @@
border-color: #059048;
}
.is-square .o-slider::-ms-thumb {
top: 50%;
position: relative;
width: 14px;
height: 14px;
position: relative;
z-index: 2;
margin-top: -9px;
margin-top: -7px;
border: 2px solid #07c160;
border-radius: 50%;
background-color: #ffffff;
@ -197,12 +196,11 @@
}
.is-disabled .o-slider::-webkit-slider-thumb {
top: 50%;
position: relative;
width: 14px;
height: 14px;
position: relative;
z-index: 2;
margin-top: -9px;
margin-top: -7px;
border: 2px solid #07c160;
border-radius: 50%;
background-color: #ffffff;
@ -221,12 +219,11 @@
border-color: #059048;
}
.is-disabled .o-slider::-moz-range-thumb {
top: 50%;
position: relative;
width: 14px;
height: 14px;
position: relative;
z-index: 2;
margin-top: -9px;
margin-top: -7px;
border: 2px solid #07c160;
border-radius: 50%;
background-color: #ffffff;
@ -245,12 +242,11 @@
border-color: #059048;
}
.is-disabled .o-slider::-ms-thumb {
top: 50%;
position: relative;
width: 14px;
height: 14px;
position: relative;
z-index: 2;
margin-top: -9px;
margin-top: -7px;
border: 2px solid #07c160;
border-radius: 50%;
background-color: #ffffff;
@ -274,12 +270,11 @@
}
.is-large .o-slider::-webkit-slider-thumb {
top: 50%;
position: relative;
width: 14px;
height: 14px;
position: relative;
z-index: 2;
margin-top: -9px;
margin-top: -7px;
border: 2px solid #07c160;
border-radius: 50%;
background-color: #ffffff;
@ -287,9 +282,10 @@
pointer-events: auto;
box-shadow: 0;
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
border: 4px solid #07c160;
width: 25px;
height: 25px;
margin-top: -14.5px;
margin-top: -12.5px;
-webkit-appearance: none;
}
.is-large .o-slider::-webkit-slider-thumb:active {
@ -299,12 +295,11 @@
border-color: #059048;
}
.is-large .o-slider::-moz-range-thumb {
top: 50%;
position: relative;
width: 14px;
height: 14px;
position: relative;
z-index: 2;
margin-top: -9px;
margin-top: -7px;
border: 2px solid #07c160;
border-radius: 50%;
background-color: #ffffff;
@ -312,9 +307,10 @@
pointer-events: auto;
box-shadow: 0;
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
border: 4px solid #07c160;
width: 25px;
height: 25px;
margin-top: -14.5px;
margin-top: -12.5px;
-webkit-appearance: none;
}
.is-large .o-slider::-moz-range-thumb:active {
@ -324,12 +320,11 @@
border-color: #059048;
}
.is-large .o-slider::-ms-thumb {
top: 50%;
position: relative;
width: 14px;
height: 14px;
position: relative;
z-index: 2;
margin-top: -9px;
margin-top: -7px;
border: 2px solid #07c160;
border-radius: 50%;
background-color: #ffffff;
@ -337,9 +332,10 @@
pointer-events: auto;
box-shadow: 0;
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
border: 4px solid #07c160;
width: 25px;
height: 25px;
margin-top: -14.5px;
margin-top: -12.5px;
appearance: none;
}
.is-large .o-slider::-ms-thumb:active {
@ -349,18 +345,17 @@
border-color: #059048;
}
.is-slim .slider-track {
.is-small .slider-track {
height: 2px;
border-radius: 0%;
}
.is-slim .o-slider::-webkit-slider-thumb {
top: 50%;
.is-small .o-slider::-webkit-slider-thumb {
position: relative;
width: 14px;
height: 14px;
position: relative;
z-index: 2;
margin-top: -9px;
margin-top: -7px;
border: 2px solid #07c160;
border-radius: 50%;
background-color: #ffffff;
@ -368,25 +363,23 @@
pointer-events: auto;
box-shadow: 0;
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
width: 20px;
height: 12px;
margin-top: -8px;
border-radius: 0%;
width: 10px;
height: 10px;
margin-top: -5px;
-webkit-appearance: none;
}
.is-slim .o-slider::-webkit-slider-thumb:active {
.is-small .o-slider::-webkit-slider-thumb:active {
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
}
.is-slim .o-slider::-webkit-slider-thumb:hover {
.is-small .o-slider::-webkit-slider-thumb:hover {
border-color: #059048;
}
.is-slim .o-slider::-moz-range-thumb {
top: 50%;
.is-small .o-slider::-moz-range-thumb {
position: relative;
width: 14px;
height: 14px;
position: relative;
z-index: 2;
margin-top: -9px;
margin-top: -7px;
border: 2px solid #07c160;
border-radius: 50%;
background-color: #ffffff;
@ -394,25 +387,23 @@
pointer-events: auto;
box-shadow: 0;
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
width: 20px;
height: 12px;
margin-top: -8px;
border-radius: 0%;
width: 10px;
height: 10px;
margin-top: -5px;
-webkit-appearance: none;
}
.is-slim .o-slider::-moz-range-thumb:active {
.is-small .o-slider::-moz-range-thumb:active {
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
}
.is-slim .o-slider::-moz-range-thumb:hover {
.is-small .o-slider::-moz-range-thumb:hover {
border-color: #059048;
}
.is-slim .o-slider::-ms-thumb {
top: 50%;
.is-small .o-slider::-ms-thumb {
position: relative;
width: 14px;
height: 14px;
position: relative;
z-index: 2;
margin-top: -9px;
margin-top: -7px;
border: 2px solid #07c160;
border-radius: 50%;
background-color: #ffffff;
@ -420,16 +411,15 @@
pointer-events: auto;
box-shadow: 0;
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
width: 20px;
height: 12px;
margin-top: -8px;
border-radius: 0%;
width: 10px;
height: 10px;
margin-top: -5px;
appearance: none;
}
.is-slim .o-slider::-ms-thumb:active {
.is-small .o-slider::-ms-thumb:active {
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
}
.is-slim .o-slider::-ms-thumb:hover {
.is-small .o-slider::-ms-thumb:hover {
border-color: #059048;
}

2
components/slider/src/index.css.map
View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["index.scss","../../common/theme.scss"],"names":[],"mappings":"AAuEA;EACE;EACA;;;AAKF;EACE;EACA;EACA;;;AAGF;EAnBE;EACA;EACA;EACA,QA/Da;EAiFb;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EACE;EACA,QA9GW;;AAiHb;EACE;EACA,QAnHW;;AAsHb;EACE;EACA,QAxHW;;AA2Hb;EAlHA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAwGE;;AArGF;EACE;;AAGF;EACE,cC7Be;;AD+HjB;EAtHA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EA4GE;;AAzGF;EACE;;AAGF;EACE,cC7Be;;ADmIjB;EA1HA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAgHE;;AA7GF;EACE;;AAGF;EACE,cC7Be;;;AD2InB;EACE;;;AAIA;EAvIA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAoBA;EAyGE;;AA1HF;EACE;;AAGF;EACE,cC7Be;;ADqJjB;EA5IA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAoBA;EA8GE;;AA/HF;EACE;;AAGF;EACE,cC7Be;;AD0JjB;EAjJA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAoBA;EAmHE;;AApIF;EACE;;AAGF;EACE,cC7Be;;;ADkKnB;EACE;;;AAIA;EA9JA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAcA;EACA;EAqIE;;AAjJF;EACE;;AAGF;EACE,cC7Be;;AD4KjB;EAnKA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAcA;EACA;EA0IE;;AAtJF;EACE;;AAGF;EACE,cC7Be;;ADgLjB;EAvKA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAcA;EACA;EA8IE;;AA1JF;EACE;;AAGF;EACE,cC7Be;;;ADuLnB;EACE;;;AAGA;EAlLA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAyBA;EACA;EACA;EA6IE;;AArKF;EACE;;AAGF;EACE,cC7Be;;ADgMjB;EAvLA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAyBA;EACA;EACA;EAkJE;;AA1KF;EACE;;AAGF;EACE,cC7Be;;ADoMjB;EA3LA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAyBA;EACA;EACA;EAsJE;;AA9KF;EACE;;AAGF;EACE,cC7Be;;;AD2MnB;EACE;EACA;;;AAGA;EAvMA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAgCA;EACA;EACA;EACA;EA0JE;;AA1LF;EACE;;AAGF;EACE,cC7Be;;ADqNjB;EA5MA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAgCA;EACA;EACA;EACA;EA+JE;;AA/LF;EACE;;AAGF;EACE,cC7Be;;ADyNjB;EAhNA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAgCA;EACA;EACA;EACA;EAmKE;;AAnMF;EACE;;AAGF;EACE,cC7Be","file":"index.css"}
{"version":3,"sourceRoot":"","sources":["index.scss","../../common/theme.scss"],"names":[],"mappings":"AA4EA;EACE;EACA;;;AAKF;EACE;EACA;EACA;;;AAGF;EAnBE;EACA;EACA;EACA,QApEa;EAsFb;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;IACE;;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EACE;EACA,QAxHW;;AA2Hb;EACE;EACA,QA7HW;;AAgIb;EACE;EACA,QAlIW;;AAqIb;EAtHA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EA6GE;;AA1GF;EACE;;AAGF;EACE,cClCe;;ADyIjB;EA1HA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAiHE;;AA9GF;EACE;;AAGF;EACE,cClCe;;AD6IjB;EA9HA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAqHE;;AAlHF;EACE;;AAGF;EACE,cClCe;;;ADqJnB;EACE;;;AAIA;EA3IA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAoBA;EA8GE;;AA/HF;EACE;;AAGF;EACE,cClCe;;AD+JjB;EAhJA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAoBA;EAmHE;;AApIF;EACE;;AAGF;EACE,cClCe;;ADoKjB;EArJA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAoBA;EAwHE;;AAzIF;EACE;;AAGF;EACE,cClCe;;;AD4KnB;EACE;;;AAIA;EAlKA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAcA;EACA;EA0IE;;AAtJF;EACE;;AAGF;EACE,cClCe;;ADsLjB;EAvKA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAcA;EACA;EA+IE;;AA3JF;EACE;;AAGF;EACE,cClCe;;AD0LjB;EA3KA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAcA;EACA;EAmJE;;AA/JF;EACE;;AAGF;EACE,cClCe;;;ADiMnB;EACE;;;AAGA;EAtLA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAyBA;EACA,OA/CmB;EAgDnB,QAhDmB;EAiDnB;EAiJE;;AA1KF;EACE;;AAGF;EACE,cClCe;;AD0MjB;EA3LA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAyBA;EACA,OA/CmB;EAgDnB,QAhDmB;EAiDnB;EAsJE;;AA/KF;EACE;;AAGF;EACE,cClCe;;AD8MjB;EA/LA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAyBA;EACA,OA/CmB;EAgDnB,QAhDmB;EAiDnB;EA0JE;;AAnLF;EACE;;AAGF;EACE,cClCe;;;ADqNnB;EACE;EACA;;;AAGA;EA3MA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAiCA,OAzDmB;EA0DnB,QA1DmB;EA2DnB;EA+JE;;AA/LF;EACE;;AAGF;EACE,cClCe;;AD+NjB;EAhNA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAiCA,OAzDmB;EA0DnB,QA1DmB;EA2DnB;EAoKE;;AApMF;EACE;;AAGF;EACE,cClCe;;ADmOjB;EApNA;EACA,OAjBa;EAkBb,QAlBa;EAmBb;EACA;EACA;EACA;EACA,kBCEU;EDDV;EACA;EACA;EACA;EAiCA,OAzDmB;EA0DnB,QA1DmB;EA2DnB;EAwKE;;AAxMF;EACE;;AAGF;EACE,cClCe","file":"index.css"}

44
components/slider/src/index.scss
View File

@ -5,6 +5,12 @@
$thumb-height: 14px;
$track-height: 4px;
$thumb-small-height: 10px;
$track-small-height: 2px;
$thumb-large-height: 25px;
$track-large-height: 6px;
// colours
$upper-color: $o-surface;
$lower-color: $o-primary;
@ -12,12 +18,11 @@ $thumb-color: $o-surface;
$hover-thumb-color: $o-primary-fade-lot;
@mixin thumb {
top: 50%;
position: relative;
width: $thumb-height;
height: $thumb-height;
position: relative;
z-index: 2;
margin-top: ($thumb-height / -2) - 2;
margin-top: $thumb-height / -2;
border: 2px solid $o-primary;
border-radius: 50%;
background-color: $thumb-color;
@ -49,17 +54,17 @@ $hover-thumb-color: $o-primary-fade-lot;
@mixin thumb-large {
@include thumb;
width: 25px;
height: 25px;
margin-top: math.div(25px, -2)- 2;
border: 4px solid $o-primary;
width: $thumb-large-height;
height: $thumb-large-height;
margin-top: math.div($thumb-large-height, -2);
}
@mixin thumb-slim {
@mixin thumb-small {
@include thumb;
width: 20px;
height: 12px;
margin-top: math.div(12px, -2) - 2;
border-radius: 0%;
width: $thumb-small-height;
height: $thumb-small-height;
margin-top: math.div($thumb-small-height, -2);
}
@mixin track {
@ -91,6 +96,11 @@ $hover-thumb-color: $o-primary-fade-lot;
margin: auto;
z-index: -1;
border-radius: 8px;
@supports (-moz-appearance: none) {
& {
top: 4px;
}
}
}
.slider-container .o-slider {
@ -205,23 +215,23 @@ $hover-thumb-color: $o-primary-fade-lot;
}
}
//===============================Slim-slider=========================================
.is-slim .slider-track {
//===============================small-slider=========================================
.is-small .slider-track {
height: 2px;
border-radius: 0%;
}
.is-slim .o-slider {
.is-small .o-slider {
&::-webkit-slider-thumb {
@include thumb-slim;
@include thumb-small;
-webkit-appearance: none;
}
&::-moz-range-thumb {
@include thumb-slim;
@include thumb-small;
-webkit-appearance: none;
}
&::-ms-thumb {
@include thumb-slim;
@include thumb-small;
appearance: none;
}
}

4
components/slider/src/index.tsx
View File

@ -9,7 +9,7 @@ interface Props {
step?: number
value?: number
second_value?: number
size: 'slim' | 'normal' | 'large'
size: 'small' | 'normal' | 'large'
range: 'single' | 'double'
orient?: 'vertical' | 'horizontal'
shape: 'square' | 'round'
@ -189,7 +189,7 @@ export default class OSlider extends WeElement<Props> {
'is-vertical': props.orient === 'vertical',
'is-square': props.shape === 'square',
'is-large': props.size === 'large',
'is-slim': props.size === 'slim',
'is-small': props.size === 'small',
'is-disabled': props.disabled,
})