164 lines
4.3 KiB
HTML
164 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>OMI Slider Demo</title>
|
|
<script type="module" src="/src/index.tsx"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="root">
|
|
<a
|
|
href="https://github.com/Tencent/omi"
|
|
target="_blank"
|
|
style="position: fixed; right: 0; top: 0; z-index: 3"
|
|
>
|
|
<img src="//alloyteam.github.io/github.png" alt="" />
|
|
</a>
|
|
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
|
<script src="https://unpkg.com/@omiu/color-picker"></script>
|
|
<script>
|
|
window.onload = function () {
|
|
const sliders = document.querySelectorAll('o-slider')
|
|
sliders.forEach((slider) => {
|
|
slider.style.padding = '20px'
|
|
})
|
|
}
|
|
</script>
|
|
<!-- <o-color-picker
|
|
id="picker"
|
|
save="0"
|
|
preview="0"
|
|
button="0"
|
|
clear="0"
|
|
width="300px"
|
|
>
|
|
</o-color-picker> -->
|
|
<div style="text-align: center">basic slider</div>
|
|
<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="100"
|
|
value="50"
|
|
reversed
|
|
id="single-reversed-range-demo"
|
|
></o-slider>
|
|
<div style="text-align: center">large slider</div>
|
|
<o-slider
|
|
min="0"
|
|
max="100"
|
|
value="50"
|
|
size="large"
|
|
id="large-single-range-demo"
|
|
></o-slider>
|
|
<div style="text-align: center">small slider</div>
|
|
<o-slider
|
|
min="0"
|
|
max="100"
|
|
value="5"
|
|
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="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="100"
|
|
value="20"
|
|
second_value="100"
|
|
range="double"
|
|
tooltip
|
|
id="double-range-demo"
|
|
></o-slider>
|
|
<div style="text-align: center">square slider</div>
|
|
<o-slider
|
|
min="0"
|
|
max="100"
|
|
value="20"
|
|
shape="square"
|
|
id="square-single-range-demo"
|
|
></o-slider>
|
|
<div style="text-align: center">square slider</div>
|
|
<o-slider
|
|
min="0"
|
|
max="100"
|
|
value="20"
|
|
shape="square"
|
|
size="large"
|
|
id="square-single-range-demo"
|
|
></o-slider>
|
|
<div style="text-align: center">square slider</div>
|
|
<o-slider
|
|
min="0"
|
|
max="100"
|
|
value="20"
|
|
shape="square"
|
|
size="small"
|
|
id="square-single-range-demo"
|
|
></o-slider>
|
|
<div style="text-align: center">disabled slider</div>
|
|
<o-slider
|
|
min="0"
|
|
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="100"
|
|
value="20"
|
|
second_value="70"
|
|
range="double"
|
|
id="double-range-demo"
|
|
></o-slider>
|
|
<div style="text-align: center">disabled double slider</div>
|
|
<o-slider
|
|
min="0"
|
|
max="100"
|
|
value="20"
|
|
second_value="70"
|
|
range="double"
|
|
disabled
|
|
id="disable-double-range-demo"
|
|
></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="100"
|
|
orient="vertical"
|
|
id="vertical-demo"
|
|
style="
|
|
position: relative;
|
|
margin-top: 200px;
|
|
left: -150px;
|
|
width: 400px;
|
|
"
|
|
></o-slider>
|
|
<o-slider
|
|
min="0"
|
|
max="100"
|
|
range="double"
|
|
orient="vertical"
|
|
value="20"
|
|
second_value="70"
|
|
id="vertical-double-demo"
|
|
style="position: relative; margin-top: -50px; width: 400px"
|
|
></o-slider>
|
|
</div>
|
|
</body>
|
|
</html>
|