Basic
Slider with InputNumber
Slider with icon
Customize tooltip
Event
Graduated slider
Vertical
Control visible of ToolTip
Reverse
Draggable track
API

Slider

A Slider component for displaying current value and intervals in range.

When To Use#

To input a value in a range.

Examples

Disabled:

Basic slider. When range is true, display as dual thumb mode. When disable is true, the slider will not be interactable.

TypeScript
JavaScript
import { Slider, Switch } from 'infrad';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [disabled, setDisabled] = useState(false);

  const onChange = (checked: boolean) => {
    setDisabled(checked);
  };

  return (
    <>
      <Slider defaultValue={30} disabled={disabled} />
      <Slider range defaultValue={[20, 50]} disabled={disabled} />
      Disabled: <Switch size="small" checked={disabled} onChange={onChange} />
    </>
  );
};

export default App;

Slider with icon

You can add an icon beside the slider to make it meaningful.

TypeScript
JavaScript
import { FrownOutlined, SmileOutlined } from 'infra-design-icons';
import { Slider } from 'infrad';
import React, { useState } from 'react';

interface IconSliderProps {
  max: number;
  min: number;
}

const IconSlider: React.FC<IconSliderProps> = props => {
  const { max, min } = props;
  const [value, setValue] = useState(0);

  const mid = Number(((max - min) / 2).toFixed(5));
  const preColorCls = value >= mid ? '' : 'icon-wrapper-active';
  const nextColorCls = value >= mid ? 'icon-wrapper-active' : '';

  return (
    <div className="icon-wrapper">
      <FrownOutlined className={preColorCls} />
      <Slider {...props} onChange={setValue} value={value} />
      <SmileOutlined className={nextColorCls} />
    </div>
  );
};

const App: React.FC = () => <IconSlider min={0} max={20} />;

export default App;
.icon-wrapper {
  position: relative;
  padding: 0px 30px;
}

.icon-wrapper .anticon {
  position: absolute;
  top: -2px;
  width: 16px;
  height: 16px;
  color: rgba(0, 0, 0, 0.25);
  font-size: 16px;
  line-height: 1;
}

.icon-wrapper .icon-wrapper-active {
  color: rgba(0, 0, 0, 0.45);
}

.icon-wrapper .anticon:first-child {
  left: 0;
}

.icon-wrapper .anticon:last-child {
  right: 0;
}

Event

The onChange callback function will fire when the user changes the slider's value. The onAfterChange callback function will fire when onmouseup fired.

TypeScript
JavaScript
import { Slider } from 'infrad';
import React from 'react';

const onChange = (value: number | [number, number]) => {
  console.log('onChange: ', value);
};

const onAfterChange = (value: number | [number, number]) => {
  console.log('onAfterChange: ', value);
};

const App: React.FC = () => (
  <>
    <Slider defaultValue={30} onChange={onChange} onAfterChange={onAfterChange} />
    <Slider
      range
      step={10}
      defaultValue={[20, 50]}
      onChange={onChange}
      onAfterChange={onAfterChange}
    />
  </>
);

export default App;

0°C26°C37°C100°C

Vertical

The vertical Slider.

TypeScript
JavaScript
import { Slider } from 'infrad';
import type { SliderMarks } from 'infrad/lib/slider';
import React from 'react';

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

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

const App: React.FC = () => (
  <>
    <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>
  </>
);

export default App;

Reversed:

Reverse

Using reverse to render slider reversely.

TypeScript
JavaScript
import { Slider, Switch } from 'infrad';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [reverse, setReverse] = useState(true);

  return (
    <>
      <Slider defaultValue={30} reverse={reverse} />
      <Slider range defaultValue={[20, 50]} reverse={reverse} />
      Reversed: <Switch size="small" checked={reverse} onChange={setReverse} />
    </>
  );
};

export default App;

Slider with InputNumber

Synchronize with InputNumber component.

TypeScript
JavaScript
import { Col, InputNumber, Row, Slider } from 'infrad';
import React, { useState } from 'react';

const IntegerStep = () => {
  const [inputValue, setInputValue] = useState(1);

  const onChange = (newValue: number) => {
    setInputValue(newValue);
  };

  return (
    <Row>
      <Col span={12}>
        <Slider
          min={1}
          max={20}
          onChange={onChange}
          value={typeof inputValue === 'number' ? inputValue : 0}
        />
      </Col>
      <Col span={4}>
        <InputNumber
          min={1}
          max={20}
          style={{ margin: '0 16px' }}
          value={inputValue}
          onChange={onChange}
        />
      </Col>
    </Row>
  );
};

const DecimalStep = () => {
  const [inputValue, setInputValue] = useState(0);

  const onChange = (value: number) => {
    if (isNaN(value)) {
      return;
    }

    setInputValue(value);
  };

  return (
    <Row>
      <Col span={12}>
        <Slider
          min={0}
          max={1}
          onChange={onChange}
          value={typeof inputValue === 'number' ? inputValue : 0}
          step={0.01}
        />
      </Col>
      <Col span={4}>
        <InputNumber
          min={0}
          max={1}
          style={{ margin: '0 16px' }}
          step={0.01}
          value={inputValue}
          onChange={onChange}
        />
      </Col>
    </Row>
  );
};

const App: React.FC = () => (
  <div>
    <IntegerStep />
    <DecimalStep />
  </div>
);

export default App;

Customize tooltip

Use tipFormatter to format content of Tooltip. If tipFormatter is null, hide it.

TypeScript
JavaScript
import { Slider } from 'infrad';
import React from 'react';

const formatter = (value: number) => `${value}%`;

const App: React.FC = () => (
  <>
    <Slider tipFormatter={formatter} />
    <Slider tipFormatter={null} />
  </>
);

export default App;

included=true

0°C26°C37°C100°C

included=false

0°C26°C37°C100°C

marks & step

0°C26°C37°C100°C

step=null

0°C26°C37°C100°C

Graduated slider

Using marks property to mark a graduated slider, use value or defaultValue to specify the position of thumb. When included is false, means that different thumbs are coordinative. when step is null, users can only slide the thumbs onto marks.

TypeScript
JavaScript
import { Slider } from 'infrad';
import type { SliderMarks } from 'infrad/lib/slider';
import React from 'react';

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

const App: React.FC = () => (
  <>
    <h4>included=true</h4>
    <Slider marks={marks} defaultValue={37} />
    <Slider range marks={marks} defaultValue={[26, 37]} />

    <h4>included=false</h4>
    <Slider marks={marks} included={false} defaultValue={37} />

    <h4>marks & step</h4>
    <Slider marks={marks} step={10} defaultValue={37} />

    <h4>step=null</h4>
    <Slider marks={marks} step={null} defaultValue={37} />
  </>
);

export default App;

Control visible of ToolTip

When tooltipVisible is true, ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.

TypeScript
JavaScript
import { Slider } from 'infrad';
import React from 'react';

const App: React.FC = () => <Slider defaultValue={30} tooltipVisible />;

export default App;

Draggable track

Make range track draggable when set range.draggableTrack.

TypeScript
JavaScript
import { Slider } from 'infrad';
import React from 'react';

const App: React.FC = () => <Slider range={{ draggableTrack: true }} defaultValue={[20, 50]} />;

export default App;

API#

Property	Description	Type	Default
autoFocus	Whether get focus when component mounted	boolean	false
defaultValue	The default value of slider. When `range` is false, use number, otherwise, use [number, number]	number \| [number, number]	0 \| [0, 0]
disabled	If true, the slider will not be interactable	boolean	false
dots	Whether the thumb can drag over tick only	boolean	false
getTooltipPopupContainer	The DOM container of the Tooltip, the default behavior is to create a div element in body	(triggerNode) => HTMLElement	() => document.body
included	Make effect when `marks` not null, true means containment and false means coordinative	boolean	true
marks	Tick mark of Slider, type of key must be `number`, and must in closed interval [min, max], each mark can declare its own style	object	{ number: ReactNode } \| { number: { style: CSSProperties, label: ReactNode } }
max	The maximum value the slider can slide to	number	100
min	The minimum value the slider can slide to	number	0
range	Dual thumb mode	boolean	false
reverse	Reverse the component	boolean	false
step	The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be null	number \| null	1
tipFormatter	Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null	value => ReactNode \| null	IDENTITY
tooltipPlacement	Set Tooltip display position. Ref Tooltip	string	-
tooltipVisible	If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering	boolean	-
value	The value of slider. When `range` is false, use number, otherwise, use [number, number]	number \| [number, number]	-
vertical	If true, the slider will be vertical	boolean	false
onAfterChange	Fire when onmouseup is fired	(value) => void	-
onChange	Callback function that is fired when the user changes the slider's value	(value) => void	-
trackStyle	The style of slider track	CSSProperties	-
handleStyle	The style of slider handle	CSSProperties	-

range#

Property	Description	Type	Default	Version
draggableTrack	Whether range track can be drag	boolean	false	4.10.0

Methods#

Name	Description	Version
blur()	Remove focus
focus()	Get focus