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

ライブラリ「rc-slider」をインストールすると、色んな他イプのスライダーの実装が簡単に可能です。ここでは、react.jsで rc-sliderを利用するための手順と簡単な使い方を記述してます。

1. 環境
2. react.js環境構築
3. rc-sliderインストール
4. rc-slider使い方

環境

OS CentOS Linux release 8.0.1905 (Core)
node V12.13.1
npm 6.14.1
React 16.13.0

react.js環境構築

下記のコマンドで構築してます。ここでは、react-appという名前でプロジェクトを作成してます。

create-react-app react-app

1	create-react-app react-app

rc-sliderインストール

作成したプロジェクトに移動して、インストールします。

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

## 作成したプロジェクトに移動

cd react-app

## インストール

npm install rc-slider

rc-slider使い方

srcディレクトリにsample.jsと名前で下記のコードを記述します。

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 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>

<p>マーク付きのスライダー</p>

</div>

<p>ステップアップ</p>

</div>

</div>

<p>マークのみ</p>

</div>

<Slider.Range min={0} marks={marks} defaultValue={[25, 25, 30, 40]} />

</div>

)

}

export default Sample

次に、srcディレクトリ配下にあるApp.jsを下記のように編集します。

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;