rc-slider

Basic Slider

This code sample demonstrates how to create a basic horizontal slider with a default value set to 30.

import React from 'react';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';

const BasicSlider = () => (
  <Slider defaultValue={30} />
);

export default BasicSlider;

Range Slider

This code sample shows how to create a range slider that allows users to select a value range. The default selected range is from 20 to 50.

import React from 'react';
import { Range } from 'rc-slider';
import 'rc-slider/assets/index.css';

const RangeSlider = () => (
  <Range defaultValue={[20, 50]} />
);

export default RangeSlider;

Slider with Marks

This code sample illustrates a slider with marks at specified values. It also shows how to style individual marks and use React components as labels.

import React from 'react';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';

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

const MarkedSlider = () => (
  <Slider marks={marks} defaultValue={37} step={null} />
);

export default MarkedSlider;

Vertical Slider

This code sample demonstrates how to create a vertical slider by setting the 'vertical' prop. The slider is contained within a div that specifies its height.

import React from 'react';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';

const VerticalSlider = () => (
  <div style={{ height: 200, marginLeft: 50 }}>
    <Slider vertical defaultValue={30} />
  </div>
);

export default VerticalSlider;