React.js ライブラリ「rc-slider」を使用して様々な種類のスライダーを作成する

create-react-app react-app

## 作成したプロジェクトに移動
cd react-app
 
## インストール
npm install rc-slider

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

const style = { width: 400, margin: 50 };
const marks = {  
  0: <strong>0%</strong>,
  25: '25%',  
  50: '50%',
  75: '75%',
  100: {
    style: {
      color: 'red',
    },
    label: <strong>100%</strong>,
  },
};

export const Sample = () => {
    return (
        <div>
            <div style={style}>
            <p>マーク付きのスライダー</p>
            <Slider min={0} marks={marks} step={null} defaultValue={25} />
            </div>
        
            <div style={style}>
            <p>ステップアップ</p>
            <Slider dots min={0} marks={marks} step={10} defaultValue={25} />
            </div>
            <div style={style}>
            <p>反転</p>
            <Slider dots reverse min={0} marks={marks} step={10} defaultValue={25} />
            </div>
        
            <div style={style}>
            <p>マークのみ</p>
            <Slider min={0} marks={marks} included={false} defaultValue={25} />
            </div>           
        
            <div style={style}>
            <p>範囲選択</p>
            <Slider.Range min={0} marks={marks} defaultValue={[25, 25, 30, 40]} />
            </div>
        </div>
    )
}
  
export default Sample

import React from 'react';
import Sample from './sample';
import './App.css';

function App() {
  const style = {
    width: "50%",
    margin: "0 auto",
    marginTop: 150
  };
  return (
    <div className="App">
      <div style={style}>
        <Sample />
      </div>
    </div>
  );
}

export default App;

npm start