noUiSliderで好い感じに日付を範囲選択出来るようにしてみた

フロントエンドで日付の範囲選択を簡単にするためにnoUiSliderを導入しましたが、デザインがいまいち好みでなかったので追加でCSSを設定してみました。

## 概要図
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394435/8d6c525f-d6f5-befe-05d7-f408cfdbd1c8.png)

## noUiSliserを導入

noUiSliderは[こちら](https://refreshless.com/nouislider/)のサイトから導入しました。 (Version 14.6.3)

## 日付に対応

exampleに日付で動く[サンプル](https://refreshless.com/nouislider/examples/#section-dates)があるので、こちらを参考にしました。

```javascript:※オブジェクト作成部抜粋
noUiSlider.create(slider,{
    start: [range_s.getTime(), range_e.getTime()],
    behaviour: 'drag',
    connect: true,
    step: 24 * 60 * 60 * 1000,
    orientation: 'horizontal', // 'horizontal' or 'vertical'
    tooltips: [tooltipsFommatter, tooltipsFommatter],
    range: {
        'min': new Date('2020/1/1').getTime(),
        'max': new Date('2020/12/31').getTime()
    },
});
```

## スタイルの変更

次のCSSを設定しました。

```css:nouislider_wrapper.css
.noUi-target {
  border-radius: 0;
}
.noUi-horizontal {
  height: 5px;
}
.noUi-vertical {
  width: 5px;
}
.noUi-horizontal .noUi-handle,
.noUi-vertical .noUi-handle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: none;
  background-color: #26A69A;
  outline: none;
  transition:
    width .2s cubic-bezier(0.215, 0.610, 0.355, 1.000),
    height .2s cubic-bezier(0.215, 0.610, 0.355, 1.000),
    left .2s cubic-bezier(0.215, 0.610, 0.355, 1.000),
    top .2s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.noUi-handle:before {
  content: none;
}
.noUi-handle:after {
  content: none;
}
.noUi-active.noUi-handle {
  width: 5px;
  height: 5px;
}
.noUi-horizontal .noUi-handle {
  transform: translate(-15px, 1px);
}
.noUi-horizontal .noUi-active.noUi-handle {
  transform: translate(-15px, 5px);
}
.noUi-vertical .noUi-handle {
  transform: translate(1px, 15px);
}
.noUi-vertical .noUi-active.noUi-handle {
  transform: translate(-5px, 15px);
}
.noUi-target .noUi-tooltip {
  position: absolute;
  height: 30px;
  width: 30px;
  top: -17px;
  left: -2px;
  border: none;
  background-color: #26A69A;
  border-radius: 50%;
  transition:
    border-radius .25s cubic-bezier(0.215, 0.610, 0.355, 1.000),
    transform .25s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transform: scale(.75) rotate(-45deg);
  transform-origin: 50% 100%;
}
.noUi-horizontal .noUi-active .noUi-tooltip {
  border-radius: 15px 15px 15px 0;
  transform: rotate(-45deg) translate(24px, -24px);
}
.noUi-vertical .noUi-active .noUi-tooltip {
  border-radius: 15px 15px 15px 0;
  transform: rotate(-90deg) translate(35px, -20px);
}
```

## デモ

Codepen

<p class="codepen" data-height="600" data-theme-id="dark" data-default-tab="result" data-user="genbu-jp" data-slug-hash="ZEpvxVP" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="noUiSliderDateSliderSample"><span>See the Pen <a href="https://codepen.io/genbu-jp/pen/ZEpvxVP">noUiSliderDateSliderSample</a> by genbu-jp (<a href="https://codepen.io/genbu-jp">@genbu-jp</a>) on <a href="https://codepen.io">CodePen</a>.</span></p><script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>