【React】noUiSliderの実装メモ

noUiSlider実装にまあまあ手間取ったのでメモ

こーゆーやつ。jQueryのライブラリがほとんどで、Reactのはreact-nouisliderとnouislider-reactしかない。（たぶん）

terminal

npm i react-nouislider

調べたらnouislider-reactがよく出てくるけどこれはなぜか動かなかったので注意。

.js

import Nouislider from 'react-nouislider';

export default class InnerPopup extends React.Component
{
  constructor(props)
  {
    super(props);
    this.state = {
      min: 0,
      max: 200
    };
  }

  handleNouiSlider = (e) => {

    this.setState({
      min: Math.round(e[0]),
      max: Math.round(e[1])
    });
  }

  handleInputMin = (e) => {
    this.setState({
      min: Math.round(e.currentTarget.value),
    });
  }

  handleInputMax = (e) => {
    this.setState({
      max: Math.round(e.currentTarget.value),
    });
  }

  render()
  {
    return (
      <div>
        <Nouislider
          range={{min: 0, max: 200}}
          start={[this.state.min, this.state.max]}
          tooltips
          onSlide={this.handleNouiSlider}
        />
        <input type="number" min="0" max="200" value={this.state.min} onChange={this.handleInputMin}/>
        <input type="number" min="0" max="200" value={this.state.max} onChange={this.handleInputMax}/>
      </div>
    )
  }
}

これでinput[number]の中身と連動する。あとこのreact-nouisliderで注意しないといけないのは、cssを用意しないと何も表示されないこと。

.css

.no-ui-slider {
  width: 100%;
  max-width: 500px;
  margin: 50px auto;
}

/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
-moz-box-sizing: border-box;
    box-sizing: border-box;
}
.noUi-base {
    width: 100%;
    height: 2px;
    background: #757575;
    position: relative;
}
.noUi-origin {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
}
.noUi-origin:nth-child(2){
  background: #757575;
}
.noUi-handle {
  border-radius: 20px;
    position: relative;
    z-index: 1;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.noUi-stacking .noUi-handle {
/* This class is applied to the lower origin when
   its values is > 50%. */
    z-index: 10;
}
.noUi-stacking + .noUi-origin {
/* Fix stacking order in IE7, which incorrectly
   creates a new context for the origins. */
    *z-index: -1;
}
.noUi-state-tap .noUi-origin {
-webkit-transition: left 0.3s, top 0.3s;
    transition: left 0.3s, top 0.3s;
}
.noUi-state-drag * {
    cursor: inherit !important;
}

/* Slider size and handle placement;
 */
.noUi-horizontal {
    height: 10px;
    width: 80%;
}
.noUi-horizontal .noUi-handle {
    width: 20px;
    height: 20px;
    left: -10px;
    top: -7px;
}
.noUi-horizontal.noUi-extended {
    padding: 0 15px;
}
.noUi-horizontal.noUi-extended .noUi-origin  {
    right: -15px;
}

/* Styling;
 */
.noUi-background {
    background: #3182bd;
}
.noUi-connect {
    background: #3FB8AF;
    box-shadow: inset 0 0 3px rgba(51,51,51,0.45);
-webkit-transition: background 450ms;
    transition: background 450ms;
}
.noUi-origin {
  border-radius: 2px;
  background: #ff8f8f;
}
.noUi-target {
    border-radius: 2px;
}
.noUi-target.noUi-connect {
    box-shadow: inset 0 0 3px rgba(51,51,51,0.45), 0 3px 6px -5px #BBB;
}

/* Handles and cursors;
 */
.noUi-dragable {
    cursor: w-resize;
}
.noUi-vertical .noUi-dragable {
    cursor: n-resize;
}
.noUi-handle {
    background: #ff6a6a;
    cursor: default;
  box-shadow: 0 0px 1px rgba(0,0,0,0.5);
    }
.noUi-active {

}

/* Handle stripes;
 */
.noUi-handle:after {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 100%;
  border-top: 11px solid #fff;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}


/* Disabled state;
 */
[disabled].noUi-connect,
[disabled] .noUi-connect {
    background: #B8B8B8;
}
[disabled] .noUi-handle {
    cursor: not-allowed;
}

これで一番上の画像のnoUiSliderができる。

参考URL