wangxueliang
7 years ago
parent
a3c1d235a1
commit
cdd3cda787
@ -0,0 +1,38 @@
|
|||||||
|
<cn>
|
||||||
|
#### 基本
|
||||||
|
基本滑动条。当 `range` 为 `true` 时，渲染为双滑块。当 `disabled` 为 `true` 时，滑块处于不可用状态。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Basic
|
||||||
|
Basic slider. When `range` is `true`, display as dual thumb mode. When `disable` is `true`, the slider will not be interactable.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-slider :defaultValue="30" :disabled="disabled" />
|
||||||
|
<a-slider range :defaultValue="[20, 50]" :disabled="disabled" />
|
||||||
|
Disabled: <a-switch size="small" :checked="disabled" @change="handleDisabledChange" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
disabled: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleDisabledChange(disabled) {
|
||||||
|
this.disabled = disabled
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.code-box-demo .ant-slider {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
<cn>
|
||||||
|
#### 事件
|
||||||
|
当 Slider 的值发生改变时，会触发 `onChange` 事件，并把改变后的值作为参数传入。在 `onmouseup` 时，会触发 `onAfterChange` 事件，并把当前值作为参数传入。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Event
|
||||||
|
The `onChange` callback function will fire when the user changes the slider's value.
|
||||||
|
The `onAfterChange` callback function will fire when `onmouseup` fired.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div class="code-box-demo">
|
||||||
|
<a-slider :defaultValue="30" @change="onChange" @afterChange="onAfterChange" />
|
||||||
|
<a-slider range :step="10" :defaultValue="[20, 50]" @change="onChange" @afterChange="onAfterChange" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
disabled: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onChange(value) {
|
||||||
|
console.log('change: ', value);
|
||||||
|
},
|
||||||
|
onAfterChange(value) {
|
||||||
|
console.log('afterChange: ', value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.code-box-demo .ant-slider {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
<cn>
|
||||||
|
#### 带 icon 的滑块
|
||||||
|
滑块左右可以设置图标来表达业务含义。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Slider with icon
|
||||||
|
You can add an icon beside the slider to make it meaningful.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div class="icon-wrapper">
|
||||||
|
<a-icon :style="{color: preColor}" type="frown-o" />
|
||||||
|
<a-slider :min="0" :max="20" @change="handleChange" :value="value" />
|
||||||
|
<a-slider :min="0" :max="20" v-model="value" />
|
||||||
|
<a-icon :style="{color: nextColor}" type="smile-o" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: 0,
|
||||||
|
min: 0,
|
||||||
|
max: 20,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleChange(value) {
|
||||||
|
this.value = value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
preColor() {
|
||||||
|
const { max, min, value } = this
|
||||||
|
const mid = ((max - min) / 2).toFixed(5);
|
||||||
|
return value >= mid ? '' : 'rgba(0, 0, 0, .45)';
|
||||||
|
const nextColor = value >= mid ? 'rgba(0, 0, 0, .45)' : '';
|
||||||
|
},
|
||||||
|
nextColor() {
|
||||||
|
const { max, min, value } = this
|
||||||
|
const mid = ((max - min) / 2).toFixed(5);
|
||||||
|
return value >= mid ? 'rgba(0, 0, 0, .45)' : '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.icon-wrapper {
|
||||||
|
position: relative;
|
||||||
|
padding: 0px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper .anticon {
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
line-height: 1;
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(0, 0, 0, .25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper .anticon:first-child {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper .anticon:last-child {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
<cn>
|
||||||
|
#### 带输入框的滑块
|
||||||
|
和 [数字输入框](#/cn/components/input-number/) 组件保持同步。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Slider with InputNumber
|
||||||
|
Synchronize with [InptNumber](#/us/components/input-number/) component.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-slider :min="1" :max="20" v-model="inputValue1" />
|
||||||
|
</a-col>
|
||||||
|
<!-- <a-col :span="4">
|
||||||
|
<a-inputNumber
|
||||||
|
:min="1"
|
||||||
|
:max="20"
|
||||||
|
style="marginLeft: 16px"
|
||||||
|
v-model="inputValue1"
|
||||||
|
/>
|
||||||
|
</a-ol> -->
|
||||||
|
</a-row>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-slider :min="0" :max="1" v-model="inputValue" :step="0.01" />
|
||||||
|
</a-col>
|
||||||
|
<!-- <a-col :span="4">
|
||||||
|
<a-inputNumber
|
||||||
|
:min="0"
|
||||||
|
:max="1"
|
||||||
|
:step="0.01"
|
||||||
|
style="marginLeft: 16px"
|
||||||
|
v-model="inputValue"
|
||||||
|
/>
|
||||||
|
</a-col> -->
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: 0,
|
||||||
|
inputValue1: 1,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.code-box-demo .ant-slider {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
<cn>
|
||||||
|
#### 自定义提示
|
||||||
|
使用 `tipFormatter` 可以格式化 `Tooltip` 的内容，设置 `tipFormatter={null}`，则隐藏 `Tooltip`。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Customerize tooltip
|
||||||
|
Use `tipFormatter` to format content of `Toolip`. If `tipFormatter` is null, hide it.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-slider :tipFormatter="formatter" />
|
||||||
|
<a-slider :tipFormatter="null" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
disabled: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatter(value) {
|
||||||
|
return `${value}%`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
<cn>
|
||||||
|
#### 垂直
|
||||||
|
垂直方向的 Slider。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Vertical
|
||||||
|
The vertical Slider.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div style="height: 300px">
|
||||||
|
<div style="float:left;height: 300px;marginLeft: 70px">
|
||||||
|
<a-slider vertical :defaultValue="30" />
|
||||||
|
</div>
|
||||||
|
<div style="float:left;height: 300px;marginLeft: 70px">
|
||||||
|
<a-slider vertical range :step="10" :defaultValue="[20, 50]" />
|
||||||
|
</div>
|
||||||
|
<div style="float:left;height: 300px;marginLeft: 70px">
|
||||||
|
<a-slider vertical range :marks="marks" :defaultValue="[26, 37]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
marks: {
|
||||||
|
0: '0°C',
|
||||||
|
26: '26°C',
|
||||||
|
37: '37°C',
|
||||||
|
100: {
|
||||||
|
style: {
|
||||||
|
color: '#f50',
|
||||||
|
},
|
||||||
|
label: <strong>100°C</strong>,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleDisabledChange(disabled) {
|
||||||
|
this.disabled = disabled
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.code-box-demo .ant-slider {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
@ -0,0 +1,145 @@
|
|||||||
|
import PropTypes from '../_util/vue-types'
|
||||||
|
import BaseMixin from '../_util/BaseMixin'
|
||||||
|
import { getOptionProps } from '../_util/props-util'
|
||||||
|
import VcSlider from '../vc-slider/src/Slider'
|
||||||
|
import VcRange from '../vc-slider/src/Range'
|
||||||
|
import VcHandle from '../vc-slider/src/Handle'
|
||||||
|
import Tooltip from '../tooltip'
|
||||||
|
|
||||||
|
// export interface SliderMarks {
|
||||||
|
// [key]: React.ReactNode | {
|
||||||
|
// style: React.CSSProperties,
|
||||||
|
// label: React.ReactNode,
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// const SliderMarks = PropTypes.shape({
|
||||||
|
// style: PropTypes.object,
|
||||||
|
// label: PropTypes.any,
|
||||||
|
// }).loose
|
||||||
|
|
||||||
|
export const SliderProps = () => ({
|
||||||
|
prefixCls: PropTypes.string,
|
||||||
|
tooltipPrefixCls: PropTypes.string,
|
||||||
|
range: PropTypes.bool,
|
||||||
|
min: PropTypes.number,
|
||||||
|
max: PropTypes.number,
|
||||||
|
step: PropTypes.oneOfType([PropTypes.number, PropTypes.any]),
|
||||||
|
marks: PropTypes.object,
|
||||||
|
dots: PropTypes.bool,
|
||||||
|
value: PropTypes.oneOfType([
|
||||||
|
PropTypes.number,
|
||||||
|
PropTypes.arrayOf(PropTypes.number),
|
||||||
|
]),
|
||||||
|
defaultValue: PropTypes.oneOfType([
|
||||||
|
PropTypes.number,
|
||||||
|
PropTypes.arrayOf(PropTypes.number),
|
||||||
|
]),
|
||||||
|
included: PropTypes.bool,
|
||||||
|
disabled: PropTypes.bool,
|
||||||
|
vertical: PropTypes.bool,
|
||||||
|
tipFormatter: PropTypes.oneOfType([
|
||||||
|
PropTypes.func,
|
||||||
|
PropTypes.object,
|
||||||
|
]),
|
||||||
|
id: PropTypes.string,
|
||||||
|
})
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Slider',
|
||||||
|
model: {
|
||||||
|
prop: 'value',
|
||||||
|
event: 'change',
|
||||||
|
},
|
||||||
|
mixins: [BaseMixin],
|
||||||
|
props: {
|
||||||
|
...SliderProps(),
|
||||||
|
prefixCls: PropTypes.string.def('ant-slider'),
|
||||||
|
tooltipPrefixCls: PropTypes.string.def('ant-tooltip'),
|
||||||
|
tipFormatter: PropTypes.oneOfType([
|
||||||
|
PropTypes.func,
|
||||||
|
PropTypes.object,
|
||||||
|
]).def(value => value.toString()),
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
visibles: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleTooltipVisible (index, visible) {
|
||||||
|
this.setState(({ visibles }) => ({
|
||||||
|
visibles: {
|
||||||
|
...visibles,
|
||||||
|
[index]: visible,
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
handleWithTooltip (h, { value, dragging, index, refStr, ...restProps }) {
|
||||||
|
const { tooltipPrefixCls, tipFormatter } = this.$props
|
||||||
|
const { visibles } = this
|
||||||
|
const visible = tipFormatter ? (visibles[index] || dragging) : false
|
||||||
|
|
||||||
|
const tooltipProps = {
|
||||||
|
props: {
|
||||||
|
prefixCls: tooltipPrefixCls,
|
||||||
|
title: tipFormatter ? tipFormatter(value) : '',
|
||||||
|
visible,
|
||||||
|
placement: 'top',
|
||||||
|
transitionName: 'zoom-down',
|
||||||
|
},
|
||||||
|
key: index,
|
||||||
|
}
|
||||||
|
const handleProps = {
|
||||||
|
props: {
|
||||||
|
value,
|
||||||
|
...restProps,
|
||||||
|
},
|
||||||
|
attrs: {
|
||||||
|
refStr,
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
mouseenter: () => this.toggleTooltipVisible(index, true),
|
||||||
|
mouseleave: () => this.toggleTooltipVisible(index, false),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<Tooltip
|
||||||
|
{...tooltipProps}
|
||||||
|
>
|
||||||
|
<VcHandle
|
||||||
|
{...handleProps}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
focus () {
|
||||||
|
this.$refs.sliderRef.focus()
|
||||||
|
},
|
||||||
|
blur () {
|
||||||
|
this.$refs.sliderRef.focus()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
render () {
|
||||||
|
const { range, ...restProps } = getOptionProps(this)
|
||||||
|
if (range) {
|
||||||
|
const vcRangeProps = {
|
||||||
|
props: {
|
||||||
|
handle: this.handleWithTooltip,
|
||||||
|
...restProps,
|
||||||
|
},
|
||||||
|
ref: 'sliderRef',
|
||||||
|
on: this.$listeners,
|
||||||
|
}
|
||||||
|
return <VcRange {...vcRangeProps} />
|
||||||
|
}
|
||||||
|
const vcSliderProps = {
|
||||||
|
props: {
|
||||||
|
handle: this.handleWithTooltip,
|
||||||
|
...restProps,
|
||||||
|
},
|
||||||
|
ref: 'sliderRef',
|
||||||
|
on: this.$listeners,
|
||||||
|
}
|
||||||
|
return <VcSlider {...vcSliderProps} />
|
||||||
|
},
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
import '../../style/index.less'
|
||||||
|
import './index.less'
|
||||||
|
|
||||||
|
// style dependencies
|
||||||
|
import '../../tooltip/style'
|
||||||
@ -0,0 +1,188 @@
|
|||||||
|
@import "../../style/themes/default";
|
||||||
|
@import "../../style/mixins/index";
|
||||||
|
|
||||||
|
@slider-prefix-cls: ~"@{ant-prefix}-slider";
|
||||||
|
|
||||||
|
.@{slider-prefix-cls} {
|
||||||
|
.reset-component;
|
||||||
|
position: relative;
|
||||||
|
margin: @slider-margin;
|
||||||
|
padding: 4px 0;
|
||||||
|
height: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.vertical();
|
||||||
|
|
||||||
|
&-with-marks {
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-rail {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: @slider-rail-background-color;
|
||||||
|
transition: background-color .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-track {
|
||||||
|
position: absolute;
|
||||||
|
height: 4px;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
background-color: @slider-track-background-color;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-handle {
|
||||||
|
position: absolute;
|
||||||
|
margin-left: -7px;
|
||||||
|
margin-top: -5px;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: solid 2px @slider-handle-color;
|
||||||
|
background-color: @component-background;
|
||||||
|
transition: border-color .3s, transform .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: @slider-handle-color-focus;
|
||||||
|
box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.@{ant-prefix}-tooltip-open {
|
||||||
|
border-color: @slider-handle-color-tooltip-open;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.@{slider-prefix-cls}-rail {
|
||||||
|
background-color: @slider-rail-background-color-hover;
|
||||||
|
}
|
||||||
|
.@{slider-prefix-cls}-track {
|
||||||
|
background-color: @slider-track-background-color-hover;
|
||||||
|
}
|
||||||
|
.@{slider-prefix-cls}-handle:not(.@{ant-prefix}-tooltip-open) {
|
||||||
|
border-color: @slider-handle-color-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-mark {
|
||||||
|
position: absolute;
|
||||||
|
top: 14px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
font-size: @font-size-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-mark-text {
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
color: @text-color-secondary;
|
||||||
|
|
||||||
|
&-active {
|
||||||
|
color: @text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-step {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-dot {
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
margin-left: -4px;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border: 2px solid @slider-dot-border-color;
|
||||||
|
background-color: @component-background;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 50%;
|
||||||
|
vertical-align: middle;
|
||||||
|
&:first-child {
|
||||||
|
margin-left: -4px;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
margin-left: -4px;
|
||||||
|
}
|
||||||
|
&-active {
|
||||||
|
border-color: @slider-dot-border-color-active;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
|
||||||
|
.@{slider-prefix-cls}-track {
|
||||||
|
background-color: @slider-disabled-color !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{slider-prefix-cls}-handle,
|
||||||
|
.@{slider-prefix-cls}-dot {
|
||||||
|
border-color: @slider-disabled-color !important;
|
||||||
|
background-color: @component-background;
|
||||||
|
cursor: not-allowed;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{slider-prefix-cls}-mark-text,
|
||||||
|
.@{slider-prefix-cls}-dot {
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical() {
|
||||||
|
&-vertical {
|
||||||
|
width: 12px;
|
||||||
|
height: 100%;
|
||||||
|
margin: 6px 10px;
|
||||||
|
padding: 0 4px;
|
||||||
|
|
||||||
|
.@{slider-prefix-cls}-rail {
|
||||||
|
height: 100%;
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{slider-prefix-cls}-track {
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{slider-prefix-cls}-handle {
|
||||||
|
margin-left: -5px;
|
||||||
|
margin-bottom: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{slider-prefix-cls}-mark {
|
||||||
|
top: 0;
|
||||||
|
left: 12px;
|
||||||
|
width: 18px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{slider-prefix-cls}-mark-text {
|
||||||
|
left: 4px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{slider-prefix-cls}-step {
|
||||||
|
width: 4px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{slider-prefix-cls}-dot {
|
||||||
|
top: auto;
|
||||||
|
left: 2px;
|
||||||
|
margin-bottom: -4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue