58 lines
1.5 KiB
JavaScript
58 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Button } from 'react-bootstrap';
|
|
import { Trans, translate } from 'react-i18next';
|
|
import Slider, { Range } from 'rc-slider';
|
|
import Tooltip from 'rc-tooltip';
|
|
// We can just import Slider or Range to reduce bundle size
|
|
// import Slider from 'rc-slider/lib/Slider';
|
|
// import Range from 'rc-slider/lib/Range';
|
|
import 'rc-slider/assets/index.css';
|
|
|
|
// https://www.npmjs.com/package/rc-slider
|
|
const createSliderWithTooltip = Slider.createSliderWithTooltip;
|
|
const Handle = Slider.Handle;
|
|
|
|
const handle = (props) => {
|
|
const { value, dragging, index, ...restProps } = props;
|
|
return (
|
|
<Tooltip
|
|
prefixCls="rc-slider-tooltip"
|
|
overlay={value}
|
|
visible={dragging}
|
|
placement="top"
|
|
key={index}
|
|
>
|
|
<Handle value={value} {...restProps} />
|
|
</Tooltip>
|
|
);
|
|
};
|
|
const wrapperStyle = { width: 400, margin: 50 };
|
|
|
|
const Sandbox = props => (
|
|
<div style={wrapperStyle}>
|
|
<Slider min={5}
|
|
max={100}
|
|
trackStyle={{ backgroundColor: 'green', height: 8 }}
|
|
railStyle={{ backgroundColor: 'orange', height: 8 }}
|
|
handleStyle={{
|
|
borderColor: 'green',
|
|
height: 20,
|
|
width: 20,
|
|
marginLeft: -14,
|
|
marginTop: -6,
|
|
/* backgroundColor: 'gray', */
|
|
}}
|
|
defaultValue={10}
|
|
step={5}
|
|
handle={handle} />
|
|
</div>
|
|
);
|
|
|
|
Sandbox.defaultProps = {
|
|
};
|
|
|
|
Sandbox.propTypes = {
|
|
};
|
|
|
|
export default translate([], { wait: true })(Sandbox);
|