滑块 Slider
issue

滑动型输入器,展示当前值和可选范围。

何时使用

当用户需要在数值区间/自定义区间内进行选择时

如何使用

import { Slider } from 'tinper-bee';

or

import Slider from 'bee-slider';
import 'bee-slider/build/Slider.css';

能力特性

标准slider

基础的slider

查看源码

Basic Slider,`step默认1`

Basic Slider,`step=20 className="owner-slider"`

Basic Slider, disabled

Controlled Slider,不可改变

带有dots的slider(dots间距同step)

基础的slider

查看源码

Basic Slider,`step=20, dots `

Basic Slider,`step=10, dots, dotStyle={borderColor: 'orange'}, activeDotStyle={borderColor: 'yellow'}`

自定义slider

自定义slider样式(track,handle,rail等样式自定义)

查看源码

Slider with custom handle and track style.

带有marks的slider

带有marks标签的step

查看源码

(1)Slider with marks,`steps默认是1`

-10°C0°C26°C47°C100°C

(2)Slider with marks and `steps=20`

0°C33°C87°C100°C

(3)Slider with marks and `dots steps=20`

0°C33°C87°C100°C

(4)Slider with marks, `step=null`,因此step = marks

0°C33°C87°C100°C

(5)Slider with marks, `included=false`

0°C33°C87°C100°C

(6)Slider with marks and `steps=10,included=false`

-10°C0°C26°C47°C100°C

(7)Range with marks

-10°C0°C26°C47°C100°C

(8)Range with marks and steps

-10°C0°C26°C47°C100°C

rangeSlider

数组变化的slider

查看源码

Basic Range,`allowCross=false step默认是1 defaultValue=[0, 20]`

Basic Range,`allowCross=true step默认是1 defaultValue=[10, 40]`

Basic Range,`disabled defaultValue=[0, 20]`

Basic Range,`step=20 defaultValue=[20, 80]`

Basic Range,`step=20, dots defaultValue=[20, 40]`

Range as child component

竖直方向的slider

竖直vertical

查看源码

Slider with `marks, step=null`

0°C26°C47°C100°C

Slider with `marks and steps=25`

0°C26°C47°C100°C

Slider with `marks and steps默认是1 included=false`

0°C26°C47°C100°C

Range with `marks steps默认是1,`

0°C26°C47°C100°C

Range with `marks and steps=10`

0°C26°C47°C100°C

带输入框的slider

和 数字输入框 组件保持同步。

查看源码

Customized Range



Customized Range




带tip的slider

和 tip展示 组件保持同步。

查看源码

Slider with Tooltip

Range with Tooltip

API

参数 说明 类型 默认值
min 最小值,默认0 number 0
max 最大值,默认100 number 100
step 步长,取值必须大于0,并且可被(max-min)整除。当marks不为空对象时,可以设置step为null,此时Slider的可选值仅有marks标出来的部分,默认1 (number OR null) 1
dots 是否只能拖拽到刻度上,默认是false boolean false
marks 刻度标记,key的类型必须为number且取值在闭区间min,max内,每个标签可以单独设置样式 object {number:string} OR {number:{style:object,label:string}}
value 设置当前取值。当range为false时,使用number,否则用[number,number] number OR [number,number] 0 OR [0,0]
defaultValue 设置初始取值。当range为false时,使用number,否则用[number,number] number OR [number,bumber] 0 OR [0,0]
className 增加额外的class string ''
included marks不为空对象时有效,值为true时表示值为包含关系,false表示并列 boolean true
disabled 值为true时,滑块为禁用状态 boolean false
vertical 值为true时,Slider为垂直方向 Boolean false
railStyle 自定义u-slider-rail的样式 Object -
trackStyle 自定义u-slider-track的样式 Object -
handleStyle 自定义u-slider-handle的样式 Object -
dotStyle 自定义u-slider-dot样式 Object -
activeDotStyle 自定义u-slider-dot-active样式 Object -
onChange 当Slider的值发生改变时,会触发onChange事件,并把改变后的值作为参数传入。 Function(value) NOOP
onAfterChange 与onmouseup触发时机一致,把当前值作为参数传入。 Function(value) NOOP
tipFormatterSlider 会把当前值传给tipFormatter,并在Tooltip中显示tipFormatter的返回值,若为null,则隐藏Tooltip。 Function -

注意事项

暂无

更新日志

标准slider
JS代码
/**
*
* @title 标准slider
* @description 基础的slider
*
*/


import React, { Component } from 'react';
import { Slider } from 'tinper-bee';


const style = { width: 600, margin: 50 ,marginBottom:60};
class Demo1 extends Component {
	
	log = (value) =>{
	console.log(value); //eslint-disable-line
	}

	render () {
		return (
			<div>
				<div style={style}>
				  <p>Basic Slider,`step默认1`</p>
				  <Slider defaultValue={20} onAfterChange={this.log}/>
				</div>
				<div style={style}>
				  <p>Basic Slider,`step=20 className="owner-slider"`</p>
				  <Slider step={20} defaultValue={40}  className={"owner-slider" }onAfterChange={this.log} />
				</div>
				<div style={style}>
				  <p>Basic Slider, disabled</p>
				   <Slider disabled defaultValue={60} />
				</div>
				<div style={style}>
				  <p>Controlled Slider,不可改变</p>
				  <Slider value={40} />
				</div>
			</div>
		)
	}
}


export default Demo1;
带有dots的slider(dots间距同step)
JS代码
/**
*
* @title 带有dots的slider(dots间距同step)
* @description 基础的slider
*
*/

import React, { Component } from 'react';
import { Slider } from 'tinper-bee';


class Demo2 extends Component {
	log = (value) =>{
	console.log(value); //eslint-disable-line
	}

	render () {
		const style = {width:600,marginLeft:50,marginBottom:60}
		return (
			<div>
				<div style={style}>
					<p>Basic Slider,`step=20, dots `</p>
					<Slider dots step={20} defaultValue={60} onAfterChange={this.log} />
				</div>
				<div style={style}>
					<p>Basic Slider,`step=10, dots, dotStyle={"{borderColor: 'orange'}"}, activeDotStyle={"{borderColor: 'yellow'}"}`</p>
					<Slider dots step={10} defaultValue={100} onAfterChange={this.log} dotStyle={{ borderColor: 'orange' }} activeDotStyle={{ borderColor: 'yellow' }} />
				</div>
			</div>
		)
	}
}

export default Demo2;
自定义slider
JS代码
/**
*
* @title 自定义slider
* @description 自定义slider样式(track,handle,rail等样式自定义)
*
*/

import React, { Component } from 'react';
import { Slider } from 'tinper-bee';


class Demo3 extends Component {
	log = (value) =>{
	console.log(value); //eslint-disable-line
	}

	render () {
		let style={width:600,marginLeft:50,marginBottom:60}
		return (
			<div style={style}>
				<p>Slider with custom handle and track style.</p>
				<Slider
				defaultValue={30}
				trackStyle={{ backgroundColor: 'blue', height: 10 }}
				handleStyle={{
				borderColor: 'blue',
				height: 28,
				width: 28,
				marginLeft: -14,
				marginTop: -9,
				backgroundColor: 'pink',
				}}
				railStyle={{ backgroundColor: 'red', height: 10 }}
				/>
			</div>
		)
	}
}

export default Demo3;
带有marks的slider
JS代码
/**
*
* @title 带有marks的slider
* @description 带有marks标签的step
*
*/


import React, { Component } from 'react';
import { Slider } from 'tinper-bee';


class Demo4 extends Component {
	log = (value) =>{
	console.log(value); //eslint-disable-line
	}

	render () {
		let style={width:600,marginLeft:50,marginBottom:60};
		const marks = {
			'-10': '-10°C',
			0: <strong>0°C</strong>,
			26: '26°C',
			47: '47°C',
			100: {
				style: {
				color: 'red',
				},
				label: <strong>100°C</strong>
			}
		};

		const marksOther = {
			0: <strong>0°C</strong>,
			33: '33°C',
			87: '87°C',
			100: {
				style: {
				color: 'red',
				},
				label: <strong>100°C</strong>
			}
		};
		
		return (
				<div>
					<div style={style}>
						<p>(1)Slider with marks,`steps默认是1`</p>
						<Slider min={-10} marks={marks} defaultValue={33} onChange={this.log}  />
					</div>
					<div style={style}>
						<p>(2)Slider with marks and `steps=20`</p>
						<Slider min={0} marks={marksOther} step={20} defaultValue={58} onChange={this.log} />
					</div>
					<div style={style}>
						<p>(3)Slider with marks and `dots steps=20`</p>
						<Slider dots min={0} marks={marksOther} step={20} defaultValue={58} onChange={this.log} />
					</div>
					<div style={style}>
						<p>(4)Slider with marks, `step=null`,因此step = marks</p>
						<Slider min={0} marks={marksOther} step={null} defaultValue={68} onChange={this.log}  />
					</div>
					<div style={style}>
						<p>(5)Slider with marks, `included=false`</p>
						<Slider min={0} marks={marksOther} included={false} defaultValue={20} />
					</div>
					<div style={style}>
						<p>(6)Slider with marks and `steps=10,included=false`</p>
						<Slider min={-10} marks={marks} step={10} included={false} defaultValue={20} />
					</div>
					<div style={style}>
						<p>(7)Range with marks</p>
						<Slider.Range min={-10} marks={marks} onChange={this.log} defaultValue={[20, 40]} />
					</div>
					<div style={style}>
						<p>(8)Range with marks and steps</p>
						<Slider.Range min={-10} marks={marks} step={10} onChange={this.log} defaultValue={[20, 40]} />
					</div>
				</div>
		)
	}
}

export default Demo4;
rangeSlider
JS代码
/**
*
* @title rangeSlider
* @description 数组变化的slider
*
*/

import React, { Component } from 'react';
import { Slider } from 'tinper-bee';


class PureRenderRange extends React.Component {
  constructor(props) {
    super(props);
  }
  
  handleChange = (value) => {
    console.log(value);
  }

  render() {
    return (
      <Slider.Range defaultValue={[20, 40, 60, 80]} onChange={this.handleChange} allowCross={false} />
    );
  }
}

class Demo5 extends Component {
	log = (value) =>{
	console.log(value); //eslint-disable-line
	}

	render () {
		let style={width:600,marginLeft:50,marginBottom:60}
		return (
			<div>
				<div style={style}>
					<p>Basic Range,`allowCross=false step默认是1 defaultValue=[0, 20]`</p>
					<Slider.Range allowCross={false} defaultValue={[0, 20]} onChange={this.log} />
				</div>
				<div style={style}>
					<p>Basic Range,`allowCross=true step默认是1 defaultValue=[10, 40]`</p>
					<Slider.Range defaultValue={[10, 40]} onChange={this.log} />
				</div>
				<div style={style}>
					<p>Basic Range,`disabled defaultValue=[0, 20]`</p>
					<Slider.Range allowCross={false} defaultValue={[0, 20]} onChange={this.log} disabled />
				</div>
				<div style={style}>
					<p>Basic Range,`step=20 defaultValue=[20, 80]` </p>
					<Slider.Range step={20} defaultValue={[20, 80]} onBeforeChange={this.log} />
				</div>
				<div style={style}>
					<p>Basic Range,`step=20, dots defaultValue=[20, 40]` </p>
					<Slider.Range dots step={20} defaultValue={[20, 40]} onAfterChange={this.log} />
				</div>
				<div style={style}>
					<p>Range as child component</p>
					<PureRenderRange />
				</div>
			</div>
		)
	}
}

export default Demo5;
竖直方向的slider
JS代码
/**
*
* @title 竖直方向的slider
* @description 竖直vertical
*
*/

import React, { Component } from 'react';
import { Slider } from 'tinper-bee';


class Demo6 extends Component {
	log = (value) =>{
	console.log(value); //eslint-disable-line
	}

	render () {
	  const style={float: 'left',height: 400, marginBottom: 160, marginLeft: 50,width:200}
	  const parentStyle = { overflow: 'hidden' };
		const marks = {
			0: <strong>0°C</strong>,
			26: '26°C',
			47: '47°C',
			100: {
				style: {
				color: 'red',
				},
				label: <strong>100°C</strong>
			}
		};

		return (
			<div style={parentStyle}>
				<div style={style}>
					<p>Slider with `marks, step=null`</p>
					<Slider vertical min={0} marks={marks} step={null} onChange={this.log} defaultValue={20} />
				</div>
				<div style={style}>
					<p>Slider with `marks and steps=25`</p>
					<Slider vertical dots min={0} marks={marks} step={25} onChange={this.log} defaultValue={20} />
				</div>
				<div style={style}>
					<p>Slider with `marks and steps默认是1 included=false`</p>
					<Slider vertical min={0} marks={marks} included={false} defaultValue={20} />
				</div>
				<div style={style}>
					<p>Range with `marks steps默认是1,`</p>
					<Slider.Range vertical min={0} marks={marks} onChange={this.log} defaultValue={[20, 40]} />
				</div>
				<div style={style}>
					<p>Range with `marks and steps=10`</p>
					<Slider.Range vertical min={0} marks={marks} step={10}onChange={this.log} defaultValue={[20, 40]}/>
				</div>
			</div>
		)
	}
}

export default Demo6;
带输入框的slider
JS代码
/**
*
* @title 带输入框的slider
* @description 和 数字输入框 组件保持同步。
*
*/

import React, { Component } from 'react';
import { Slider } from 'tinper-bee';


class CustomizedSlider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value:45
    };
  }
  onInputChange = (e) =>{
    //console.log(e.target.value)
    let value = parseInt(e.target.value);
    if(value >= 100){
      value = 100;
    }else if(value <= 0 || e.target.value == ''){
      value = 0;
    }
    this.changeValue(value)
  }

  onSliderChange = (value) => {
    //console.log(value);
    this.changeValue(value)
  }
  
  changeValue = (value) =>{
    this.setState({
      value:value
    })
  }
  render() {
    return (
      <div>
        <input type="number" value={this.state.value} onChange={this.onInputChange} />
        <br /><br />
        <Slider value={this.state.value} onChange={this.onSliderChange} />
      </div>
    );
  }
}

class CustomizedRange extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lowerBound: 20,
      upperBound: 40,
      value: [20, 40],
    };
  }

  onLowerBoundChange = (e) => {
    let upperBound = this.state.upperBound;
    let value = parseInt(e.target.value);

    if(value > upperBound){
      value = upperBound
    }else if(value <0 || value == ''){
      value = 0;
    }

    this.setValue(value,upperBound);
  }

  onUpperBoundChange = (e) => {
    let lowerBound = this.state.lowerBound;
    let value = parseInt(e.target.value);

    if(value < lowerBound){
      value = lowerBound
    }else if( value > 100 ){
      value = 100;
    }
    this.setValue(lowerBound,value);
  }
  
  onSliderChange = (value) => {
    let upperBound = value[1];
    let lowerBound = value[0];
    this.setValue(lowerBound,upperBound);
  }
  
  setValue = (lowerBound,upperBound) =>{
    this.setState({
      lowerBound:lowerBound,
      upperBound:upperBound,
      value:[lowerBound, upperBound] 
    })
  }
  
  render() {
    return (
      <div>
        <label>LowerBound: </label>
        <input type="number" value={this.state.lowerBound} onChange={this.onLowerBoundChange} />
        <br />
        <label>UpperBound: </label>
        <input type="number" value={this.state.upperBound} onChange={this.onUpperBoundChange} />
        <br /><br />
        <Slider.Range value={this.state.value} onChange={this.onSliderChange} />
      </div>
    );
  }
}

class Demo7 extends Component {
	log = (value) =>{
	console.log(value); //eslint-disable-line
	}

	render () {
		let style={width:600,marginLeft:50,marginBottom:60}
		return (
			<div>
        <div style={style}>
          <p>Customized Range</p>
          <CustomizedSlider />
        </div>
				<div style={style}>
  				<p>Customized Range</p>
  				<CustomizedRange />
				</div>
			</div>
		)
	}
}

export default Demo7;
带tip的slider
JS代码
/**
*
* @title 带tip的slider
* @description 和 tip展示 组件保持同步。
*
*/

import React, { Component } from 'react';
import { Slider } from 'tinper-bee';


const createSliderWithTooltip = Slider.createSliderWithTooltip;
const RangeTooltip = createSliderWithTooltip(Slider.Range);
const SliderTooltip = createSliderWithTooltip(Slider);

class Demo8 extends Component {
	log = (value) =>{
	console.log(value); //eslint-disable-line
	}

	render () {
		const wrapperStyle = { width: 400, margin: 50 };
		return (
      <div>
        <div style={wrapperStyle}>
          <p>Slider with Tooltip</p>
          <SliderTooltip min={0} max={100} defaultValue={45} tipFormatter={value => `${value}%`}/>
        </div>
        <div style={wrapperStyle}>
          <p>Range with Tooltip</p>
          <RangeTooltip min={0} max={20} defaultValue={[3, 10]} tipFormatter={value => `${value}%`} />
        </div>
      </div>
		)
	}
}

export default Demo8;
SCSS代码
.tooltip.in{
  opacity:1;
}