test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-16 01:41:02 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity
f37f471373
ant-design/components/slider/demo/vertical.md
David Broder-Rodgers 654a675532 docs: Responsive fixes for examples pages (#19448) 
* Remove fixed width from cascader examples

* Replace fixed vertical slider example height with clearfix div

* Replace fixed width on TreeSelect examples with percentage width

* Update test snapshots

* Use inline-block rather than float left for vertical slider example
2019-10-29 11:24:06 +08:00

741 B
Raw Blame History

order title
6
zh-CN en-US
垂直 Vertical

zh-CN

垂直方向的 Slider。

en-US

The vertical Slider.

import { Slider } from 'antd';

const style = {
  display: 'inline-block',
  height: 300,
  marginLeft: 70,
};

const marks = {
  0: '0°C',
  26: '26°C',
  37: '37°C',
  100: {
    style: {
      color: '#f50',
    },
    label: <strong>100°C</strong>,
  },
};

ReactDOM.render(
  <div>
    <div style={style}>
      <Slider vertical defaultValue={30} />
    </div>
    <div style={style}>
      <Slider vertical range step={10} defaultValue={[20, 50]} />
    </div>
    <div style={style}>
      <Slider vertical range marks={marks} defaultValue={[26, 37]} />
    </div>
  </div>,
  mountNode,
);