Dual Range Slider

by incutonez

HTML

<article>
  <input type="range" min="1" max="100" value="50" class="slider slider-max" id="myRange">
  <input type="range" min="1" max="100" value="50" class="slider slider-min" id="myRange">
</article>

SCSS

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background-color: #DADADA;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
  border-radius: 8px;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  width: 0;
  height: 0;
}

.slider-max::-webkit-slider-thumb {
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 12px solid #00B4E6;
}

.slider-min::-webkit-slider-thumb {
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #00B4E6;
}

.slider::-webkit-slider-thumb,
.slider::-moz-range-thumb {
  background-color: #00B4E6;
  cursor: pointer;
  width: 0;
  height: 0;
}

JavaScript

// TODOJEF: Fix https://sfc.vuejs.org/#eNq9VVtP2zAU/itWpokikaSgMU1ZQWNiDzzsZQ97youbnLaGxLZsp5Sh/vcdX3Jtx0CTJoRqn/Od79yd5+hGymTbQJRFC10oJg3RYBp5nXNWS6EMueOyMT8oX8NtQyuyUqImeZSkY7nlyKPPOV+kngYJ8GKglhU1gDdCFhOqFKWLtINEZ5F3GddUJvdacAzq2RrmQaHzKCNOYmXOY4aHjTFSZ2mqV4UN414nQq1TPCWq4YbVkICu46USjxoUEufR2YAjReEWVKyAl6BAvcQ5gR7wWtp9zveYymF5bInH9aDKsKICUlRU6yvM0trEyhrFJVrlkcMh0mmIeZKAMAfII5LVjON17o50h8fzub1s41qUUOEdAT9pZevU+dAVw9iJ/4kRgLovjh6Vgruwv1vpv7qmu7+4prtjrq3UVycN5RlPiRurbsTCjD4rWO3b0WwnMeewc9oSVrSpEGVpOa0hIyfj9py4gXCDPzttJ6wQXBvSlpBcEXQyu7g8ReqBOqQZ1Jdzq/aAVcMLwwQnfVVnsAVuOg+EVOA8oLWkSsMdNx6SGKrWYJKt5T4j547Wm7AVmVmT6863Rw1YSeAcAzoGnNAONdBbA8YDCjF/yILujmdBd2/OAk0WkyDGWTjOMeBIFqMsfdrTLBS2VvGeu+UMD0FP0gn6ph2I6C6IXAh236fPnjZPuNa6EBJKlCRh8p37+BGWD8zEVEqguE8FjiMX3Cf2yEqzybBS8/fuvgG23piMfJI+JdGYivGhRUtnkEoz26mMJBfa6YYyIWnBzFOnW9LiYa1Ew8u4EJVQmUdjA7FxDiFFa0uXWlSN8Q6NkBmZu2ON7WWotzdX6pBothH4TPp0g1/MaQrK2tDDg2A2Tb18RY2OCotGaZuEFIwbUMNi+ljbSk5jte/QS6EshXISmzV2gWAlWHlQq4BaCmNE/Qqg8sGcX3TAd/P51w/fPh5Eh/X979FVsHpNcMcDw93o9bX4Fb5ng6Df2iv8UON/Mv06ttt8OMnvbm/sX3gEpjvUN4GWrNFDRT/yCvBrw7Z+uPx+252+jva/ATHtHcc=