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

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

概要図

noUiSliserを導入

noUiSliderはこちらのサイトから導入しました。 (Version 14.6.3)

日付に対応

exampleに日付で動くサンプルがあるので、こちらを参考にしました。

※オブジェクト作成部抜粋

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を設定しました。

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

See the Pen noUiSliderDateSliderSample by genbu-jp (@genbu-jp) on CodePen.