feat(range): add range slider bar

assets/js/range.js

@@ -0,0 +1,10 @@
+export const range = () => {
+  for (let e of document.querySelectorAll(
+    'input[type="range"].slider-progress'
+  )) {
+    e.style.setProperty('--value', e.value);
+    e.style.setProperty('--min', e.min == '' ? '0' : e.min);
+    e.style.setProperty('--max', e.max == '' ? '100' : e.max);
+    e.addEventListener('input', () => e.style.setProperty('--value', e.value));
+  }
+};

components/Atoms/Range/Range.stories.js

@@ -0,0 +1,13 @@
+import Range from './Range.twig';
+import { range } from '../../../assets/js/range';
+
+export default {
+  title: 'Design System/Atoms/Range'
+};
+
+export const base = {
+  render: () => Range(),
+  play: () => {
+    range();
+  }
+};

components/Atoms/Range/Range.twig

@@ -0,0 +1 @@
+<input type="range" class="Range slider-progress" />

components/Atoms/Range/range.css

@@ -0,0 +1,96 @@
+input[type='range'].Range {
+  height: 2.2em;
+  -webkit-appearance: none;
+}
+
+input[type='range'].Range.slider-progress {
+  --range: calc(var(--max) - var(--min));
+  --ratio: calc((var(--value) - var(--min)) / var(--range));
+  --sx: calc(0.5 * 15px + var(--ratio) * (100% - 15px));
+}
+
+input[type='range'].Range:focus {
+  outline: none;
+}
+
+input[type='range'].Range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 15px;
+  height: 15px;
+  border-radius: 1em;
+  background: #fa533c;
+  border: none;
+  margin-top: calc(3px * 0.5 - 15px * 0.5);
+}
+
+input[type='range'].Range::-webkit-slider-runnable-track {
+  height: 3px;
+  border: none;
+  border-radius: 5px;
+  background: #d6d6d6;
+}
+
+input[type='range'].Range.slider-progress::-webkit-slider-runnable-track {
+  background:
+    linear-gradient(#fa533c, #fa533c) 0 / var(--sx) 100% no-repeat,
+    #d6d6d6;
+}
+
+input[type='range'].Range::-moz-range-thumb {
+  width: 15px;
+  height: 15px;
+  border-radius: 1em;
+  background: #fa533c;
+  border: none;
+}
+
+input[type='range'].Range::-moz-range-track {
+  height: 3px;
+  border: none;
+  border-radius: 5px;
+  background: #d6d6d6;
+  box-shadow: none;
+}
+
+input[type='range'].Range.slider-progress::-moz-range-track {
+  background:
+    linear-gradient(#fa533c, #fa533c) 0 / var(--sx) 100% no-repeat,
+    #d6d6d6;
+}
+
+input[type='range'].Range::-ms-fill-upper {
+  background: transparent;
+  border-color: transparent;
+}
+
+input[type='range'].Range::-ms-fill-lower {
+  background: transparent;
+  border-color: transparent;
+}
+
+input[type='range'].Range::-ms-thumb {
+  width: 15px;
+  height: 15px;
+  border-radius: 1em;
+  background: #fa533c;
+  border: none;
+  margin-top: 0;
+  box-sizing: border-box;
+}
+
+input[type='range'].Range::-ms-track {
+  height: 3px;
+  border-radius: 5px;
+  background: #d6d6d6;
+  border: none;
+  box-sizing: border-box;
+}
+
+input[type='range'].Range.slider-progress::-ms-fill-lower {
+  height: 3px;
+  border-radius: 5px 0 0 5px;
+  margin: -undefined 0 -undefined -undefined;
+  background: #fa533c;
+  border: none;
+  border-right-width: 0;
+}