<div class="Range" data-js="range-slider"></div>

$color-background: #e4dfd3;
$color-highlight: #fe9996;

.Range {
  height: 200px;
}

/**
 * Restyle the range slider
 */

.noUi-target {
  width: 6px;
}

.noUi-base {
  margin-left: 22px;
  background: $color-background;
}

.noUi-pips-vertical {
  top: 0;
  left: calc(100% + 16px);
  height: 100%;
  padding: 0 10px;
}

.noUi-origin {
  background: $color-highlight;
}

.noUi-handle {
  left: -2px;
  top: 0;
  height: 20px;
  width: 20px;
  border: none;
  border-radius: 50%;
  background: $color-highlight;
  transform: translateX(-100%) translateY(-50%);
  box-shadow: none;

  &::before {
    display: none;
  }

  &::after {
    position: absolute;
    top: 50%;
    right: 2px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 5px;
    border-color: transparent transparent transparent $color-highlight;
    background: transparent;
    transform: translateX(100%) translateY(-50%);
    content: "";
  }
}

.noUi-value {
  display: none;
}

.noUi-marker,
.noUi-marker-large {
  width: 10px;
  height: 2px;
  margin-top: -1px;
  background: $color-background;
  transform-origin: left;
  transition: 0.2s transform ease;
}

/**
 * Modifiers to highlight the markers
 */

.noUi-marker--is-inRange,
.noUi-marker--is-current {
  background: $color-highlight;
}

.noUi-marker--is-current {
  transform: scaleX(2);
}

/**
 * Resets and presentational style
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/**
 * Default style from noUiSlider, but removed all unused styles
 */

.noUi-base {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
}

.noUi-target,
.noUi-target * {
	touch-action: none;
	user-select: none;
	box-sizing: border-box;
}

.noUi-target {
	position: relative;
	direction: ltr;
}

.noUi-origin {
	position: absolute;
	right: 0;
	top: 0;
	left: 0;
	bottom: 0;
}

.noUi-handle {
	position: relative;
	z-index: 1;
}

.noUi-state-tap .noUi-origin {
	transition: left 0.3s, top 0.3s;
}

.noUi-state-drag * {
	cursor: inherit !important;
}

.noUi-pips,
.noUi-marker {
	position: absolute;
}

/**
 * Inspired by Flat Sliders from Ana Tudor
 * https://www.smashingmagazine.com/2016/04/inspiring-ui-demos-logins-menus-toggles-and-more/#pure-css-flat-sliders
 * https://codepen.io/thebabydino/pen/RNEEZP
 */

const rangeSlider = document.querySelector('[data-js="range-slider"]');
const minRange = 0;
const maxRange = 100;

noUiSlider.create(rangeSlider, {
	range: {
    'min': [minRange],
    'max': [maxRange]
  },
	start: 0,
	orientation: 'vertical',
  direction: 'rtl',
	pips: {
		mode: 'range',
		density: 3
	}
});

function mapRange(value, low1, high1, low2, high2) {
  return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}

/**
 * Set the state of the markers
 */
function setMarkers() {
  const pips = document.querySelectorAll('.noUi-marker');
  const currentValue = rangeSlider.noUiSlider.get();
  const mappedValue = Math.round(mapRange(currentValue, minRange, maxRange, 0, pips.length - 1));
  
  for (let i = 0; i < pips.length; i++) {
    pips[i].classList.remove('noUi-marker--is-current');
    pips[i].classList.remove('noUi-marker--is-inRange');
  }
  
  for (let i = 0; i < mappedValue; i++) {;
    pips[i].classList.add('noUi-marker--is-inRange');
  }
  
  pips[mappedValue].classList.add('noUi-marker--is-current');
}

rangeSlider.noUiSlider.on('slide', setMarkers);
setMarkers();