thumb-hover transition and added docs
This commit is contained in:
perry-C
parent
ccbf2e690d
commit
c6086563be
|
|
@ -0,0 +1,64 @@
|
|||
## Slider
|
||||
|
||||
Slider
|
||||
|
||||
<iframe height="undefined" style="width: 100%;" scrolling="no" title="OMIU Slider" src="https://codepen.io/omijs/embed/undefined?height=undefined&theme-id=default&default-tab=undefined" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/undefined'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
## Import
|
||||
|
||||
```js
|
||||
import '@omiu/slider'
|
||||
```
|
||||
|
||||
Or use script tag to ref it.
|
||||
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@omiu/slider"></script>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```html
|
||||
<o-slider></o-slider>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
```tsx
|
||||
{
|
||||
min?: number
|
||||
max?: number
|
||||
step?: number
|
||||
value?: number
|
||||
second_value?: number
|
||||
double_range?: boolean
|
||||
vertical?: boolean
|
||||
round: boolean
|
||||
disabled?: boolean
|
||||
}
|
||||
```
|
||||
|
||||
### defaultProps
|
||||
|
||||
```tsx
|
||||
{
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
value: 0,
|
||||
//default a single square range slider
|
||||
double_range: false,
|
||||
vertical: false,
|
||||
round: false,
|
||||
disabled: false,
|
||||
}
|
||||
```
|
||||
### Events
|
||||
|
||||
* change
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
## Slider 滑块
|
||||
|
||||
一般用于拖动页面内容
|
||||
|
||||
<iframe height="undefined" style="width: 100%;" scrolling="no" title="OMIU Slider" src="https://codepen.io/omijs/embed/undefined?height=undefined&theme-id=default&default-tab=undefined" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/undefined'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
## 导入
|
||||
|
||||
```js
|
||||
import '@omiu/slider'
|
||||
```
|
||||
|
||||
或者直接 script 标签引入。
|
||||
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@omiu/slider"></script>
|
||||
```
|
||||
|
||||
## 使用
|
||||
|
||||
```html
|
||||
<o-slider></o-slider>
|
||||
```
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
```tsx
|
||||
{
|
||||
min?: number
|
||||
max?: number
|
||||
step?: number
|
||||
value?: number
|
||||
second_value?: number
|
||||
double_range?: boolean
|
||||
vertical?: boolean
|
||||
round: boolean
|
||||
disabled?: boolean
|
||||
}
|
||||
```
|
||||
|
||||
### 默认属性
|
||||
```tsx
|
||||
{
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
value: 0,
|
||||
//default a single square range slider
|
||||
double_range: false,
|
||||
vertical: false,
|
||||
round: false,
|
||||
disabled: false,
|
||||
}
|
||||
```
|
||||
### 事件
|
||||
* change
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
## Slider
|
||||
|
||||
Slider
|
||||
|
||||
* [→ CodePen](https://codepen.io/omijs/pen/undefined)
|
||||
|
||||
## Import
|
||||
|
||||
```js
|
||||
import '@omiu/slider'
|
||||
```
|
||||
|
||||
Or use script tag to ref it.
|
||||
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@omiu/slider"></script>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```html
|
||||
<o-slider></o-slider>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
```tsx
|
||||
{
|
||||
min?: number
|
||||
max?: number
|
||||
step?: number
|
||||
value?: number
|
||||
second_value?: number
|
||||
double_range?: boolean
|
||||
vertical?: boolean
|
||||
round: boolean
|
||||
disabled?: boolean
|
||||
}
|
||||
```
|
||||
|
||||
### defaultProps
|
||||
|
||||
```tsx
|
||||
{
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
value: 0,
|
||||
//default a single square range slider
|
||||
double_range: false,
|
||||
vertical: false,
|
||||
round: false,
|
||||
disabled: false,
|
||||
}
|
||||
```
|
||||
### Events
|
||||
|
||||
* change
|
||||
|
|
@ -10,10 +10,12 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="root">
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||||
<script src="../../src/index.js"></script>
|
||||
<o-slider min="0" max="10" value="2" id="single-range-demo" ></o-slider>
|
||||
<o-slider min="0" max="10" value="2" id="single-range-demo" ></o-slider>
|
||||
<o-slider min="0" max="10" value="2" round id="round-single-range-demo" ></o-slider>
|
||||
<o-slider min="0" max="10" value="2" disabled id="disabled-single-range-demo" ></o-slider>
|
||||
<o-slider min="0" max="200" value="20" second_value="70" double_range id="double-range-demo"></o-slider>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@
|
|||
"main": "src/index.js",
|
||||
"module": "src/index.esm.js",
|
||||
"types": "src/index.d.ts",
|
||||
"docsExtend": {
|
||||
"cnName": "滑块",
|
||||
"cnDescription": "一般用于拖动页面内容"
|
||||
},
|
||||
"scripts": {
|
||||
"docs": "node ./scripts/docs-gen.js",
|
||||
"start": "node ./scripts/webpack.build.js -- demo",
|
||||
|
|
|
|||
|
|
@ -52,12 +52,12 @@
|
|||
height: 31.25px;
|
||||
width: 31.25px;
|
||||
background-color: #07c160;
|
||||
transition: background-color 150ms;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
top: 50%;
|
||||
margin-top: -17.625px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
pointer-events: auto;
|
||||
z-index: 2;
|
||||
transition: background-color 150ms;
|
||||
-webkit-appearance: none; }
|
||||
.slider-container .o-slider::-webkit-slider-thumb:hover, .slider-container .o-slider::-webkit-slider-thumb:focus {
|
||||
background-color: #059048; }
|
||||
|
|
@ -66,12 +66,12 @@
|
|||
height: 31.25px;
|
||||
width: 31.25px;
|
||||
background-color: #07c160;
|
||||
transition: background-color 150ms;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
top: 50%;
|
||||
margin-top: -17.625px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
pointer-events: auto;
|
||||
z-index: 2;
|
||||
transition: background-color 150ms;
|
||||
-webkit-appearance: none; }
|
||||
.slider-container .o-slider::-moz-range-thumb:hover, .slider-container .o-slider::-moz-range-thumb:focus {
|
||||
background-color: #059048; }
|
||||
|
|
@ -80,12 +80,12 @@
|
|||
height: 31.25px;
|
||||
width: 31.25px;
|
||||
background-color: #07c160;
|
||||
transition: background-color 150ms;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
top: 50%;
|
||||
margin-top: -17.625px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
pointer-events: auto;
|
||||
z-index: 2;
|
||||
transition: background-color 150ms;
|
||||
appearance: none; }
|
||||
.slider-container .o-slider::-ms-thumb:hover, .slider-container .o-slider::-ms-thumb:focus {
|
||||
background-color: #059048; }
|
||||
|
|
@ -122,12 +122,12 @@
|
|||
height: 31.25px;
|
||||
width: 31.25px;
|
||||
background-color: #07c160;
|
||||
transition: background-color 150ms;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
top: 50%;
|
||||
margin-top: -17.625px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
pointer-events: auto;
|
||||
z-index: 2;
|
||||
transition: background-color 150ms;
|
||||
pointer-events: none;
|
||||
cursor: none;
|
||||
background-color: #c0c4cc;
|
||||
|
|
@ -140,12 +140,12 @@
|
|||
height: 31.25px;
|
||||
width: 31.25px;
|
||||
background-color: #07c160;
|
||||
transition: background-color 150ms;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
top: 50%;
|
||||
margin-top: -17.625px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
pointer-events: auto;
|
||||
z-index: 2;
|
||||
transition: background-color 150ms;
|
||||
pointer-events: none;
|
||||
cursor: none;
|
||||
background-color: #c0c4cc;
|
||||
|
|
@ -158,12 +158,12 @@
|
|||
height: 31.25px;
|
||||
width: 31.25px;
|
||||
background-color: #07c160;
|
||||
transition: background-color 150ms;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
top: 50%;
|
||||
margin-top: -17.625px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
pointer-events: auto;
|
||||
z-index: 2;
|
||||
transition: background-color 150ms;
|
||||
pointer-events: none;
|
||||
cursor: none;
|
||||
background-color: #c0c4cc;
|
||||
|
|
|
|||
|
|
@ -110,12 +110,12 @@ var css = `@use 'sass:math';
|
|||
height: 31.25px;
|
||||
width: 31.25px;
|
||||
background-color: #07c160;
|
||||
transition: background-color 150ms;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
top: 50%;
|
||||
margin-top: -17.625px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
pointer-events: auto;
|
||||
z-index: 2;
|
||||
transition: background-color 150ms;
|
||||
-webkit-appearance: none; }
|
||||
.slider-container .o-slider::-webkit-slider-thumb:hover, .slider-container .o-slider::-webkit-slider-thumb:focus {
|
||||
background-color: #059048; }
|
||||
|
|
@ -124,12 +124,12 @@ var css = `@use 'sass:math';
|
|||
height: 31.25px;
|
||||
width: 31.25px;
|
||||
background-color: #07c160;
|
||||
transition: background-color 150ms;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
top: 50%;
|
||||
margin-top: -17.625px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
pointer-events: auto;
|
||||
z-index: 2;
|
||||
transition: background-color 150ms;
|
||||
-webkit-appearance: none; }
|
||||
.slider-container .o-slider::-moz-range-thumb:hover, .slider-container .o-slider::-moz-range-thumb:focus {
|
||||
background-color: #059048; }
|
||||
|
|
@ -138,12 +138,12 @@ var css = `@use 'sass:math';
|
|||
height: 31.25px;
|
||||
width: 31.25px;
|
||||
background-color: #07c160;
|
||||
transition: background-color 150ms;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
top: 50%;
|
||||
margin-top: -17.625px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
pointer-events: auto;
|
||||
z-index: 2;
|
||||
transition: background-color 150ms;
|
||||
appearance: none; }
|
||||
.slider-container .o-slider::-ms-thumb:hover, .slider-container .o-slider::-ms-thumb:focus {
|
||||
background-color: #059048; }
|
||||
|
|
@ -180,12 +180,12 @@ var css = `@use 'sass:math';
|
|||
height: 31.25px;
|
||||
width: 31.25px;
|
||||
background-color: #07c160;
|
||||
transition: background-color 150ms;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
top: 50%;
|
||||
margin-top: -17.625px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
pointer-events: auto;
|
||||
z-index: 2;
|
||||
transition: background-color 150ms;
|
||||
pointer-events: none;
|
||||
cursor: none;
|
||||
background-color: #c0c4cc;
|
||||
|
|
@ -198,12 +198,12 @@ var css = `@use 'sass:math';
|
|||
height: 31.25px;
|
||||
width: 31.25px;
|
||||
background-color: #07c160;
|
||||
transition: background-color 150ms;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
top: 50%;
|
||||
margin-top: -17.625px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
pointer-events: auto;
|
||||
z-index: 2;
|
||||
transition: background-color 150ms;
|
||||
pointer-events: none;
|
||||
cursor: none;
|
||||
background-color: #c0c4cc;
|
||||
|
|
@ -216,12 +216,12 @@ var css = `@use 'sass:math';
|
|||
height: 31.25px;
|
||||
width: 31.25px;
|
||||
background-color: #07c160;
|
||||
transition: background-color 150ms;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
top: 50%;
|
||||
margin-top: -17.625px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
pointer-events: auto;
|
||||
z-index: 2;
|
||||
transition: background-color 150ms;
|
||||
pointer-events: none;
|
||||
cursor: none;
|
||||
background-color: #c0c4cc;
|
||||
|
|
@ -239,18 +239,26 @@ var OSlider = /** @class */ (function (_super) {
|
|||
function OSlider() {
|
||||
var _this = _super !== null && _super.apply(this, arguments) || this;
|
||||
_this.sliderMax = _this.props.max;
|
||||
_this.handleSliderOne = function () {
|
||||
_this.handleSliderOne = function (evt) {
|
||||
var first_value = parseInt(_this.rootNode.children[0].value);
|
||||
if (_this.__$second_value === null || first_value <= _this.__$second_value) {
|
||||
//! bad
|
||||
if (first_value <= _this.__$second_value || !_this.props.double_range) {
|
||||
_this.__$value = first_value;
|
||||
if (!_this.props.double_range) {
|
||||
_this.fire('change', _this.__$value);
|
||||
}
|
||||
else {
|
||||
_this.fire('change', [_this.__$value, _this.__$second_value]);
|
||||
}
|
||||
}
|
||||
_this.fillColor();
|
||||
_this.update();
|
||||
};
|
||||
_this.handleSliderTwo = function () {
|
||||
_this.handleSliderTwo = function (evt) {
|
||||
var second_value = parseInt(_this.rootNode.children[1].value);
|
||||
if (second_value >= _this.__$value) {
|
||||
_this.__$second_value = second_value;
|
||||
_this.fire('change', [_this.__$value, _this.__$second_value]);
|
||||
}
|
||||
_this.fillColor();
|
||||
_this.update();
|
||||
|
|
@ -281,9 +289,6 @@ var OSlider = /** @class */ (function (_super) {
|
|||
this.fillColor();
|
||||
this.update();
|
||||
};
|
||||
// updated() {
|
||||
// console.log(this.__$value, this.__$second_value)
|
||||
// }
|
||||
OSlider.prototype.render = function (props) {
|
||||
var _this = this;
|
||||
var cls = extractClass(props, 'slider-container', {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -43,33 +43,37 @@ export default class OSlider extends WeElement<Props> {
|
|||
}
|
||||
|
||||
__$value: number
|
||||
|
||||
__$second_value: number
|
||||
|
||||
rootNode
|
||||
sliderOne
|
||||
sliderTwo
|
||||
|
||||
sliderTrack
|
||||
|
||||
sliderMax = this.props.max
|
||||
|
||||
handleSliderOne = () => {
|
||||
handleSliderOne = (evt) => {
|
||||
const first_value = parseInt(this.rootNode.children[0].value)
|
||||
if (this.__$second_value === null || first_value <= this.__$second_value) {
|
||||
//! bad
|
||||
if (first_value <= this.__$second_value || !this.props.double_range) {
|
||||
this.__$value = first_value
|
||||
if (!this.props.double_range) {
|
||||
this.fire('change', this.__$value)
|
||||
} else {
|
||||
this.fire('change', [this.__$value, this.__$second_value])
|
||||
}
|
||||
}
|
||||
|
||||
this.fillColor()
|
||||
this.update()
|
||||
}
|
||||
|
||||
handleSliderTwo = () => {
|
||||
handleSliderTwo = (evt) => {
|
||||
const second_value = parseInt(this.rootNode.children[1].value)
|
||||
|
||||
if (second_value >= this.__$value) {
|
||||
this.__$second_value = second_value
|
||||
this.fire('change', [this.__$value, this.__$second_value])
|
||||
}
|
||||
|
||||
this.fillColor()
|
||||
this.update()
|
||||
}
|
||||
|
|
@ -101,10 +105,6 @@ export default class OSlider extends WeElement<Props> {
|
|||
this.update()
|
||||
}
|
||||
|
||||
// updated() {
|
||||
// console.log(this.__$value, this.__$second_value)
|
||||
// }
|
||||
|
||||
render(props) {
|
||||
const cls = extractClass(props, 'slider-container', {
|
||||
'is-vertical': props.vertical,
|
||||
|
|
|
|||
Loading…
Reference in New Issue