slider

by tim_lee

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.0/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.0/nouislider.min.js"></script>
<body>
  <div class="wrap">
    <div id="slider"></div>
  </div>
</body>

CSS

.wrap {
  width: 80%;
  margin: 3rem auto;
}

.noUi-base {
  cursor: pointer;
}
.noUi-horizontal {
  height: 5px;
}
.noUi-horizontal .noUi-handle {
  width: 20px;
  height: 20px;
  left: -10px;
  top: -8px;
  background-color: orangered;
  box-shadow: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
}
.noUi-horizontal .noUi-handle::before,
.noUi-horizontal .noUi-handle::after {
  display: none;
}

@media (max-width: 800px) {
  .noUi-horizontal .noUi-handle {
    background-color: lightseagreen;
  }
  .noUi-base {
    height: 200px;
  }
}

JavaScript

var defaultSliderConfig = {
	start: 1,
	connect: false,
	orientation: 'horizontal',
  //orientation: 'vertical',
	snap: true,
	range: {
		'min': 0,
		'25%': 1,
		'75%': 2,
		'max': 3
	},
	step: 1,
	pips: {
		mode: 'values',
		values: [0, 1, 2, 3],
		density: 4
	}
}

var slider = document.getElementById('slider');

noUiSlider.create(slider, defaultSliderConfig);