Issue 26

src/components/PetRegist/Ellipse.svg:Zone.Identifier

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=https://www.figma.com/

src/components/PetRegist/index.css

@@ -0,0 +1,98 @@
+* {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+html {
+  font-size: 10px;
+}
+
+.organize {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#bonhoeffer {
+  display: flex;
+  flex-direction: column;
+}
+
+.question {
+  font-family: Montserrat;
+  font-size: 1.8rem;
+  font-weight: 500;
+  line-height: 26px;
+  letter-spacing: 0px;
+  text-align: center;
+  color: #39434F;
+}
+
+#adjuste {
+  font-family: Montserrat;
+  font-size: 1.4rem;
+  font-weight: 400;
+  line-height: 0;
+  letter-spacing: 0px;
+  text-align: center;
+  color: #606873;
+}
+
+#weight {
+  font-family: Montserrat;
+  font-size: 8rem;
+  font-weight: 700;
+  line-height: 50px;
+  letter-spacing: 0px;
+  text-align: center;
+  color: #1B85F3;
+  margin-bottom: 120px;
+}
+
+#rangeSlider {
+  margin-top: 0;
+  width: 600px;
+  -webkit-appearance: none;
+}
+#rangeSlider:focus {
+  outline: none;
+}
+#rangeSlider::-webkit-slider-runnable-track {
+  width: 10000px;
+  height: 1px;
+  cursor: pointer;
+  box-shadow: none;
+  background: #606873;
+  border-radius: 0px;
+  border: 0px solid #010101;
+}
+#rangeSlider::-webkit-slider-thumb {
+  box-shadow: none;
+  border: 2px solid #1268CC;
+  height: 42px;
+  width: 75px;
+  border-radius: 15px;
+  background: #1B85F3;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -20px;
+}
+
+#Slider-SVG {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+}
+
+#bars-svg {
+  width: 100%;
+  display: flex;
+  background-repeat: repeat-x;
+  position: absolute;
+  top: -80px;
+  z-index: -1;
+}/*# sourceMappingURL=index.css.map */

src/components/PetRegist/index.js

@@ -0,0 +1,48 @@
+/* eslint-disable prettier/prettier */
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+import Bars from './Bars.svg';
+
+const html = `
+  <section class="slider">
+    <div class="slider__text-slider">
+        <h3 data-select="weight" class="slider__weight">0</h3>
+    </div>
+    <div class="slider__container">
+      <input type="range" value="50" step="0.1" min="0" max="100" data-select="rangeSlider" class="slider__input"/>
+      <img class="slider__bars-svg" alt="rangeSlider" src="${Bars}" data-select="svg">
+    </div>    
+  </section>
+`;
+
+const events = ['weight'];
+
+export default function Slider() {
+  Component.call(this, { html, events });
+  this.enable = true;
+
+  this.selected.get('rangeSlider').addEventListener(
+    'input',
+    (event) => {
+      if (!this.enable) return;
+
+      this.weight();
+      this.setValue(event.target.value);
+    },
+    false,
+  );
+}
+Slider.prototype = Object.assign(Slider.prototype, Component.prototype, {
+  setTitle() {
+    this.selected.get('weight').textContent = Text;
+  },
+  setValue() {
+    this.selected.get('weight').textContent = this.selected.get('rangeSlider').value;
+  },
+  weight() {
+    this.emit('weight');
+  },
+  disable() {
+    this.enable = false;
+  },
+});