feat: input dinamic range slider

fix devhatt#26

src/components/RangeSlider/index.js

@@ -0,0 +1,77 @@
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+
+const events = ['change', 'interactionEnd'];
+
+const html = `
+  <div class="range-slider" data-select="range-slider">
+    <h1 class="range-slider__value" data-select="range-slider-value">10 kg</h1>
+    <div class="range-slider__content" data-select="range-slider-content">
+      <button class="range-slider__button" data-select="range-slider-button">I I I</button>
+    </div>
+  </div>
+`;
+
+export default function RangeSlider({ minimum = 0, maximum = 100 }) {
+  Component.call(this, { html, events });
+
+  const valueElement = this.selected.get('range-slider-value');
+  const containerElement = this.selected.get('range-slider-content');
+
+  let isMouseDown = false;
+  let startX = 0;
+  let currentValue = Math.min(Math.max(10, minimum), maximum);
+  const stepSize = 0.05;
+
+  const handleStart = (clientX) => {
+    isMouseDown = true;
+    startX = clientX;
+  };
+
+  const handleMove = (clientX) => {
+    if (!isMouseDown) return;
+
+    const mouseX = clientX;
+    const offsetX = mouseX - startX;
+
+    containerElement.style.backgroundPositionX = `${parseInt(containerElement.style.backgroundPositionX || 0, 10) - offsetX}px`;
+
+    currentValue = mouseX > startX
+      ? Math.min(maximum, currentValue + stepSize)
+      : Math.max(minimum, currentValue - stepSize);
+
+    valueElement.textContent = `${currentValue.toFixed(1)} kg`;
+
+    startX = mouseX;
+    this.emit('change', currentValue);
+  };
+
+  const handleEnd = () => {
+    isMouseDown = false;
+    this.emit('interactionEnd', currentValue);
+  };
+
+  const handleMouseMove = (event) => {
+    event.preventDefault();
+    const clientX = event.type === 'touchmove' ? event.touches[0].clientX : event.clientX;
+    handleMove(clientX);
+  };
+
+  containerElement.addEventListener('mousedown', (event) => {
+    event.preventDefault();
+    handleStart(event.clientX);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleEnd);
+  });
+
+  containerElement.addEventListener('touchstart', (event) => {
+    event.preventDefault();
+    handleStart(event.touches[0].clientX);
+    document.addEventListener('touchmove', handleMouseMove);
+    document.addEventListener('touchend', handleEnd);
+  });
+}
+
+RangeSlider.prototype = Object.assign(Object.create(Component.prototype), {
+  constructor: RangeSlider,
+});

src/components/RangeSlider/index.scss

@@ -0,0 +1,79 @@
+.range-slider {
+  width: 100%;
+}
+
+.range-slider__button {
+  color: rgb(209, 230, 255);
+
+  font-size: 2rem;
+
+  padding: 10px 20px;
+  border: 2px solid rgb(18, 104, 204);
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  background-color: rgb(27, 133, 243);
+  transform: translate(-50%, -50%);
+
+  border-radius: 8px;
+
+  cursor: grab;
+  letter-spacing: 1;
+}
+
+.range-slider__value {
+  font-family: 'Noto Sans', sans-serif;
+  color: rgb(27, 133, 243);
+
+  text-align: center;
+  font-size: 8rem;
+  font-weight: 700;
+
+  margin-bottom: 2rem;
+}
+
+.range-slider__content {
+  width: 100%;
+  height: 100px;
+  overflow: hidden;
+
+  position: relative;
+
+  background-image: url('../../home/images/ruler-slider.svg');
+  background-repeat: repeat-x;
+  background-position: 0 center;
+}
+
+.range-slider__content::before {
+  left: 0;
+
+  background: linear-gradient(
+    to right,
+    rgb(255, 255, 255),
+    rgba(255, 255, 255, 0)
+  );
+}
+
+.range-slider__content::after {
+  right: 0;
+
+  background: linear-gradient(
+    to left,
+    rgb(255, 255, 255),
+    rgba(255, 255, 255, 0)
+  );
+}
+
+.range-slider__content::before,
+.range-slider__content::after {
+  width: 200px;
+  height: 100%;
+
+  position: absolute;
+  z-index: 2;
+
+  pointer-events: none;
+  content: '';
+}

src/home/components/NoPetRegirestedPage/index.js

@@ -1,17 +1,11 @@
 import { Component } from 'pet-dex-utilities';
 import Button from '../../../components/Button';
-import petUrl from './images/no-pet-regirested-page.png';
+import RangeSlider from '../../../components/RangeSlider';
 import './index.scss';
 
 const html = `
-  <div data-select="container" class="no-pet-regirested-page">
-    <div class="no-pet-regirested-page__content">
-      <div class="no-pet-regirested-page__description">
-        <h1 class="no-pet-regirested-page__title">Você ainda não tem nenhum pet cadastrado</h1>
-        <p class="no-pet-regirested-page__hint">Crie o perfil do seu pet e deixe o nosso site com o focinho do seu filhote!</p>
-      </div>
-      <img class="no-pet-regirested-page__image" src="${petUrl}" alt="dog in an smart phone" />
-    </div>
+  <div data-select="container" class="no-pet-regirested-page" style="width: 100%;">
+    <div class="no-pet-regirested-page__content" style="width: 100%;"></div>
   </div>;
 `;
 
@@ -29,6 +23,11 @@ export default function NoPetRegirestedPage() {
     .get('button')
     .classList.add('no-pet-regirested-page__button');
   this.button.mount($container);
+
+  const rangeSlider = new RangeSlider(0, 100);
+  const contentElement = $container.querySelector('.no-pet-regirested-page__content');
+
+  rangeSlider.mount(contentElement);
 }
 
 NoPetRegirestedPage.prototype = Object.assign(

src/stories/RangeSlider.stories.js

@@ -0,0 +1,22 @@
+import RangeSlider from '../components/RangeSlider';
+
+export default {
+  title: 'Components/RangeSlider',
+  render: (args) => {
+    const rangeSlider = new RangeSlider(args);
+    const $container = document.createElement('div');
+    rangeSlider.mount($container);
+    return $container;
+  },
+  argTypes: {
+    minimum: { control: 'number', default: 0 },
+    maximum: { control: 'number', default: 100 },
+  },
+};
+
+export const Default = {
+  args: {
+    minimum: 0,
+    maximum: 100,
+  },
+};