From d96b0336dde8e4e2dd5d924cbec24e710df761ec Mon Sep 17 00:00:00 2001
From: Emerson Laurentino <emerson@laurentino.co>
Date: Mon, 23 Aug 2021 18:12:37 -0300
Subject: [PATCH 01/17] feat(store-ui): slider

---
 packages/store-ui/src/atoms/Slider/Slider.tsx | 98 +++++++++++++++++++
 packages/store-ui/src/atoms/Slider/index.ts   |  2 +
 .../src/atoms/Slider/stories/Slider.mdx       | 12 +++
 .../atoms/Slider/stories/Slider.stories.tsx   | 37 +++++++
 packages/store-ui/src/deprecated/index.ts     |  4 +-
 packages/store-ui/src/index.ts                |  3 +
 themes/theme-b2c-tailwind/src/atoms/index.css |  1 +
 .../theme-b2c-tailwind/src/atoms/slider.css   | 58 +++++++++++
 8 files changed, 213 insertions(+), 2 deletions(-)
 create mode 100644 packages/store-ui/src/atoms/Slider/Slider.tsx
 create mode 100644 packages/store-ui/src/atoms/Slider/index.ts
 create mode 100644 packages/store-ui/src/atoms/Slider/stories/Slider.mdx
 create mode 100644 packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx
 create mode 100644 themes/theme-b2c-tailwind/src/atoms/slider.css

diff --git a/packages/store-ui/src/atoms/Slider/Slider.tsx b/packages/store-ui/src/atoms/Slider/Slider.tsx
new file mode 100644
index 0000000000..cfa58efa70
--- /dev/null
+++ b/packages/store-ui/src/atoms/Slider/Slider.tsx
@@ -0,0 +1,98 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+export type SliderProps = {
+  min: number
+  max: number
+  showValues?: boolean
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  onChange?: (value: { min: number; max: number }) => void
+}
+
+const Slider = ({
+  min,
+  max,
+  onChange,
+  testId,
+  showValues = true,
+}: SliderProps) => {
+  const [minVal, setMinVal] = useState(min)
+  const [maxVal, setMaxVal] = useState(max)
+
+  const minValRef = useRef(min)
+  const maxValRef = useRef(max)
+  const range = useRef<HTMLDivElement>(null)
+
+  const getPercent = useCallback(
+    (value) => Math.round(((value - min) / (max - min)) * 100),
+    [min, max]
+  )
+
+  useEffect(() => {
+    const minPercent = getPercent(minVal)
+    const maxPercent = getPercent(maxValRef.current)
+
+    if (range.current) {
+      range.current.style.left = `${minPercent}%`
+      range.current.style.width = `${maxPercent - minPercent}%`
+    }
+  }, [minVal, getPercent])
+
+  useEffect(() => {
+    const minPercent = getPercent(minValRef.current)
+    const maxPercent = getPercent(maxVal)
+
+    if (range.current) {
+      range.current.style.width = `${maxPercent - minPercent}%`
+    }
+  }, [maxVal, getPercent])
+
+  useEffect(() => {
+    onChange?.({ min: minVal, max: maxVal })
+  }, [minVal, maxVal, onChange])
+
+  return (
+    <div data-store-slider data-testid={testId}>
+      <div data-store-slider-range>
+        <div ref={range} data-store-slider-track />
+        <input
+          type="range"
+          min={min}
+          max={max}
+          value={minVal}
+          onChange={(event) => {
+            const value = Math.min(Number(event.target.value), maxVal - 1)
+
+            setMinVal(value)
+            minValRef.current = value
+          }}
+          data-store-slider-thumb="left"
+          style={{ zIndex: minVal > max - 100 ? 5 : 'auto' }}
+        />
+        <input
+          type="range"
+          min={min}
+          max={max}
+          value={maxVal}
+          onChange={(event) => {
+            const value = Math.max(Number(event.target.value), minVal + 1)
+
+            setMaxVal(value)
+            maxValRef.current = value
+          }}
+          data-store-slider-thumb="right"
+        />
+      </div>
+      {showValues && (
+        <div data-store-slider-values>
+          <div data-store-slider-value="min">{minVal}</div>
+          <div data-store-slider-value="max">{maxVal}</div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Slider
diff --git a/packages/store-ui/src/atoms/Slider/index.ts b/packages/store-ui/src/atoms/Slider/index.ts
new file mode 100644
index 0000000000..12d64d0f2f
--- /dev/null
+++ b/packages/store-ui/src/atoms/Slider/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Slider'
+export type { SliderProps } from './Slider'
diff --git a/packages/store-ui/src/atoms/Slider/stories/Slider.mdx b/packages/store-ui/src/atoms/Slider/stories/Slider.mdx
new file mode 100644
index 0000000000..898c33eb05
--- /dev/null
+++ b/packages/store-ui/src/atoms/Slider/stories/Slider.mdx
@@ -0,0 +1,12 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import Slider from '../Slider'
+
+# Preview
+
+<Canvas>
+  <Story id="atoms-slider--slider" />
+</Canvas>
+
+# Props
+
+<ArgsTable of={Slider} />
diff --git a/packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx b/packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx
new file mode 100644
index 0000000000..830b6a73d4
--- /dev/null
+++ b/packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx
@@ -0,0 +1,37 @@
+import type { Story, Meta } from '@storybook/react'
+import React from 'react'
+
+import type { ComponentArgTypes } from '../../../typings/utils'
+import type { SliderProps } from '../Slider'
+import Component from '../Slider'
+import mdx from './Slider.mdx'
+
+const SliderTemplate: Story<SliderProps> = (props) => <Component {...props} />
+
+export const Slider = SliderTemplate.bind({})
+
+const argTypes: ComponentArgTypes<SliderProps> = {
+  min: {
+    control: { type: 'text' },
+    defaultValue: '0',
+  },
+  max: {
+    control: { type: 'text' },
+    defaultValue: '500',
+  },
+  showValues: {
+    control: { type: 'boolean' },
+    defaultValue: true,
+  },
+}
+
+export default {
+  title: 'Atoms/Slider',
+  component: Slider,
+  argTypes,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+} as Meta
diff --git a/packages/store-ui/src/deprecated/index.ts b/packages/store-ui/src/deprecated/index.ts
index e9ac835193..a475c0ae46 100644
--- a/packages/store-ui/src/deprecated/index.ts
+++ b/packages/store-ui/src/deprecated/index.ts
@@ -20,7 +20,7 @@ export {
   Text,
   Radio as UIRadio,
   Checkbox as UICheckbox,
-  Slider,
+  Slider as UISlider,
   Field,
   Progress,
   Donut,
@@ -57,7 +57,7 @@ export type {
   TextProps,
   RadioProps as UIRadioProps,
   CheckboxProps as UICheckboxProps,
-  SliderProps,
+  SliderProps as UISliderProps,
   ProgressProps,
   DonutProps,
   AvatarProps,
diff --git a/packages/store-ui/src/index.ts b/packages/store-ui/src/index.ts
index 1f9d7cde6c..cb0fcd30f8 100644
--- a/packages/store-ui/src/index.ts
+++ b/packages/store-ui/src/index.ts
@@ -32,6 +32,9 @@ export type { RadioProps } from './atoms/Radio'
 export { default as Badge } from './atoms/Badge'
 export type { BadgeProps } from './atoms/Badge'
 
+export { default as Slider } from './atoms/Slider'
+export type { SliderProps } from './atoms/Slider'
+
 // Molecules
 export { default as Bullets } from './molecules/Bullets'
 export type { BulletsProps } from './molecules/Bullets'
diff --git a/themes/theme-b2c-tailwind/src/atoms/index.css b/themes/theme-b2c-tailwind/src/atoms/index.css
index 72a06c5174..fbb52d98ea 100644
--- a/themes/theme-b2c-tailwind/src/atoms/index.css
+++ b/themes/theme-b2c-tailwind/src/atoms/index.css
@@ -6,3 +6,4 @@
 @import "./textarea.css";
 @import "./overlay.css";
 @import "./badge.css";
+@import "./slider.css";
diff --git a/themes/theme-b2c-tailwind/src/atoms/slider.css b/themes/theme-b2c-tailwind/src/atoms/slider.css
new file mode 100644
index 0000000000..01ec98c639
--- /dev/null
+++ b/themes/theme-b2c-tailwind/src/atoms/slider.css
@@ -0,0 +1,58 @@
+[data-store-slider] {
+  @apply py-2 px-1 w-full;
+}
+
+[data-store-slider-range] {
+  @apply bg-gray-200 rounded-full relative h-2 w-full;
+}
+
+[data-store-slider-track] {
+  @apply bg-blue-500 absolute;
+  height: inherit;
+}
+
+[data-store-slider-values] {
+  @apply mt-4 flex justify-between;
+}
+
+/* Removing the default appearance */
+[data-store-slider-thumb],
+[data-store-slider-thumb]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+[data-store-slider-thumb] {
+  @apply pointer-events-none h-0 outline-none absolute;
+  width: inherit;
+}
+
+[data-store-slider-thumb='left'] {
+  @apply z-10;
+}
+
+[data-store-slider-thumb='right'] {
+  @apply z-20;
+}
+
+/* For Chrome browsers */
+[data-store-slider-thumb]::-webkit-slider-thumb {
+  @apply bg-gray-100 border-none rounded-full pointer-events-auto h-4 w-4 relative mt-1;
+  box-shadow: 0 0 1px 1px #ced4da;
+  cursor: col-resize;
+}
+
+[data-store-slider-thumb='left']::-webkit-slider-thumb {
+  @apply -ml-1;
+}
+
+[data-store-slider-thumb='right']::-webkit-slider-thumb {
+  @apply -mr-1;
+}
+
+/* For Firefox browsers */
+[data-store-slider-thumb]::-moz-range-thumb {
+  @apply bg-gray-100 border-none rounded-full pointer-events-auto h-4 w-4 relative mt-1;
+  box-shadow: 0 0 1px 1px #ced4da;
+  cursor: col-resize;
+}

From 5467d4fe7df29087a4716c792f22a75dd2511621 Mon Sep 17 00:00:00 2001
From: Emerson Laurentino <emerson@laurentino.co>
Date: Tue, 24 Aug 2021 14:40:39 -0300
Subject: [PATCH 02/17] feat(store-ui): readme to slider component

---
 packages/store-ui/src/atoms/Slider/README.md | 79 ++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 packages/store-ui/src/atoms/Slider/README.md

diff --git a/packages/store-ui/src/atoms/Slider/README.md b/packages/store-ui/src/atoms/Slider/README.md
new file mode 100644
index 0000000000..93ec003d84
--- /dev/null
+++ b/packages/store-ui/src/atoms/Slider/README.md
@@ -0,0 +1,79 @@
+# Slider
+
+## Installation
+
+From the command line in your project directory, run npm install `@vtex/store-ui` or yarn add `@vtex/store-ui`.
+
+```cmd
+npm install @vtex/store-ui
+# or
+yarn add @vtex/store-ui
+```
+
+For style, you can install our default theme, run npm install `@vtex/theme-b2c-tailwind` or yarn add `@vtex/theme-b2c-tailwind`:
+
+```cmd
+npm install @vtex/theme-b2c-tailwind
+# or
+yarn add @vtex/theme-b2c-tailwind
+```
+
+```tsx
+import { Slider } from '@vtex/store-ui'
+import '@vtex/theme-b2c-tailwind/dist/index.css'
+```
+
+## Usage
+
+```tsx
+import { Slider } from '@vtex/store-ui'
+
+function Example() {
+  return (
+    <div>
+      <Slider min={0} max={100} />
+    </div>
+  )
+}
+```
+
+## API
+
+### Component
+
+```tsx
+<Slider min={0} max={100} />
+```
+
+### CSS Selectors
+
+```css
+[data-store-slider] {
+}
+[data-store-slider-range] {
+}
+[data-store-slider-track] {
+}
+[data-store-slider-thumb='(left|right)'] {
+}
+[data-store-slider-values] {
+}
+[data-store-slider-value='(min|max)'] {
+}
+```
+
+### Props
+
+| Prop       | Type    | Required | Default      |
+| ---------- | ------- | -------- | ------------ |
+| min        | number  | true     |              |
+| max        | number  | true     |              |
+| showValues | boolean | false    | true         |
+| testId     | string  | false    | store-slider |
+| onChange   | void    | false    |              |
+
+## TODO
+
+- [ ] [Keyboard Interaction](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb_kbd_interaction)
+- [ ] More test cases
+- [ ] Support to orientation

From 9af94a7628206ab7656421be0f5fd1ed978c65eb Mon Sep 17 00:00:00 2001
From: Emerson Laurentino <emerson@laurentino.co>
Date: Tue, 24 Aug 2021 14:41:01 -0300
Subject: [PATCH 03/17] feat(store-ui): test to slider component

---
 packages/store-ui/src/atoms/Slider/Slider.test.tsx | 12 ++++++++++++
 packages/store-ui/src/atoms/Slider/Slider.tsx      |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 packages/store-ui/src/atoms/Slider/Slider.test.tsx

diff --git a/packages/store-ui/src/atoms/Slider/Slider.test.tsx b/packages/store-ui/src/atoms/Slider/Slider.test.tsx
new file mode 100644
index 0000000000..37857581a3
--- /dev/null
+++ b/packages/store-ui/src/atoms/Slider/Slider.test.tsx
@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import Slider from './Slider'
+
+describe('Slider', () => {
+  it('`data-store-slider` is present', () => {
+    const { getByTestId } = render(<Slider min={0} max={100} />)
+
+    expect(getByTestId('store-slider')).toHaveAttribute('data-store-slider')
+  })
+})
diff --git a/packages/store-ui/src/atoms/Slider/Slider.tsx b/packages/store-ui/src/atoms/Slider/Slider.tsx
index cfa58efa70..4518ba751c 100644
--- a/packages/store-ui/src/atoms/Slider/Slider.tsx
+++ b/packages/store-ui/src/atoms/Slider/Slider.tsx
@@ -15,7 +15,7 @@ const Slider = ({
   min,
   max,
   onChange,
-  testId,
+  testId = 'store-slider',
   showValues = true,
 }: SliderProps) => {
   const [minVal, setMinVal] = useState(min)

From da6fe22f664b6c7ec4c9d6b0a1763d8fddcc12ba Mon Sep 17 00:00:00 2001
From: Emerson Laurentino <emerson@laurentino.co>
Date: Tue, 24 Aug 2021 15:16:24 -0300
Subject: [PATCH 04/17] feat(store-ui): WAI-ARIA

---
 packages/store-ui/src/atoms/Slider/README.md  | 18 ++++---
 packages/store-ui/src/atoms/Slider/Slider.tsx | 48 ++++++++++++++++++-
 2 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/packages/store-ui/src/atoms/Slider/README.md b/packages/store-ui/src/atoms/Slider/README.md
index 93ec003d84..5e4951d384 100644
--- a/packages/store-ui/src/atoms/Slider/README.md
+++ b/packages/store-ui/src/atoms/Slider/README.md
@@ -64,13 +64,17 @@ function Example() {
 
 ### Props
 
-| Prop       | Type    | Required | Default      |
-| ---------- | ------- | -------- | ------------ |
-| min        | number  | true     |              |
-| max        | number  | true     |              |
-| showValues | boolean | false    | true         |
-| testId     | string  | false    | store-slider |
-| onChange   | void    | false    |              |
+| Prop             | Type    | Required | Default      |
+| ---------------- | ------- | -------- | ------------ |
+| min              | number  | true     |              |
+| max              | number  | true     |              |
+| showValues       | boolean | false    | true         |
+| testId           | string  | false    | store-slider |
+| onChange         | void    | false    |              |
+| onChange         | void    | false    |              |
+| onChange         | void    | false    |              |
+| ariaLabel        | string  | false    |              |
+| getAriaValueText | void    | false    |              |
 
 ## TODO
 
diff --git a/packages/store-ui/src/atoms/Slider/Slider.tsx b/packages/store-ui/src/atoms/Slider/Slider.tsx
index 4518ba751c..282d220722 100644
--- a/packages/store-ui/src/atoms/Slider/Slider.tsx
+++ b/packages/store-ui/src/atoms/Slider/Slider.tsx
@@ -1,14 +1,38 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
 export type SliderProps = {
+  /**
+   * The minimum value of the slider.
+   */
   min: number
+  /**
+   * The maximum value of the slider.
+   */
   max: number
+  /**
+   * Show selected values.
+   *
+   * @default true
+   */
   showValues?: boolean
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   *
+   * @default 'store-slider'
    */
   testId?: string
+  /**
+   * Callback that fires when the slider value changes.
+   */
   onChange?: (value: { min: number; max: number }) => void
+  /**
+   * Set a human-readable name for the slider.
+   */
+  ariaLabel?: string
+  /**
+   * A function used to set a human-readable value text based on the slider's current value.
+   */
+  getAriaValueText?(value: number, thumb?: 'min' | 'max'): string
 }
 
 const Slider = ({
@@ -17,6 +41,8 @@ const Slider = ({
   onChange,
   testId = 'store-slider',
   showValues = true,
+  ariaLabel,
+  getAriaValueText,
 }: SliderProps) => {
   const [minVal, setMinVal] = useState(min)
   const [maxVal, setMaxVal] = useState(max)
@@ -54,7 +80,13 @@ const Slider = ({
   }, [minVal, maxVal, onChange])
 
   return (
-    <div data-store-slider data-testid={testId}>
+    <div
+      data-store-slider
+      data-testid={testId}
+      aria-label={ariaLabel}
+      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+      role="slider"
+    >
       <div data-store-slider-range>
         <div ref={range} data-store-slider-track />
         <input
@@ -70,6 +102,13 @@ const Slider = ({
           }}
           data-store-slider-thumb="left"
           style={{ zIndex: minVal > max - 100 ? 5 : 'auto' }}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={minVal}
+          aria-label={String(minVal)}
+          aria-labelledby={
+            getAriaValueText ? getAriaValueText(minVal, 'min') : undefined
+          }
         />
         <input
           type="range"
@@ -83,6 +122,13 @@ const Slider = ({
             maxValRef.current = value
           }}
           data-store-slider-thumb="right"
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={maxVal}
+          aria-label={String(maxVal)}
+          aria-labelledby={
+            getAriaValueText ? getAriaValueText(maxVal, 'max') : undefined
+          }
         />
       </div>
       {showValues && (

From 5f8ca31553807253fdd2752580164f5803e8fc35 Mon Sep 17 00:00:00 2001
From: Emerson Laurentino <emerson@laurentino.co>
Date: Tue, 24 Aug 2021 15:21:59 -0300
Subject: [PATCH 05/17] fix(store-ui): remove component from slider story

---
 packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx b/packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx
index 830b6a73d4..92d8b1d818 100644
--- a/packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx
+++ b/packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx
@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
 import React from 'react'
 
 import type { ComponentArgTypes } from '../../../typings/utils'
@@ -27,7 +27,6 @@ const argTypes: ComponentArgTypes<SliderProps> = {
 
 export default {
   title: 'Atoms/Slider',
-  component: Slider,
   argTypes,
   parameters: {
     docs: {

From 69b76d1ecafe43f4b384d685842d364ac9988140 Mon Sep 17 00:00:00 2001
From: Emerson Laurentino <emerson@laurentino.co>
Date: Thu, 26 Aug 2021 11:49:06 -0300
Subject: [PATCH 06/17] docs(store-ui): move installation to readme

---
 packages/store-ui/README.md                  | 21 ++++++++++++++++--
 packages/store-ui/src/atoms/Slider/README.md | 23 --------------------
 2 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/packages/store-ui/README.md b/packages/store-ui/README.md
index 00d9b69fa1..5d99a2fb46 100644
--- a/packages/store-ui/README.md
+++ b/packages/store-ui/README.md
@@ -4,12 +4,29 @@
 
 [![NPM](https://img.shields.io/npm/v/@vtex/store-ui.svg)](https://www.npmjs.com/package/@vtex/store-ui) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-## Install
+## Installation
 
-```bash
+From the command line in your project directory, run npm install `@vtex/store-ui` or yarn add `@vtex/store-ui`.
+
+```cmd
+npm install @vtex/store-ui
+# or
 yarn add @vtex/store-ui
 ```
 
+For style, you can install our default theme, run npm install `@vtex/theme-b2c-tailwind` or yarn add `@vtex/theme-b2c-tailwind`:
+
+```cmd
+npm install @vtex/theme-b2c-tailwind
+# or
+yarn add @vtex/theme-b2c-tailwind
+```
+
+```tsx
+import { Slider } from '@vtex/store-ui'
+import '@vtex/theme-b2c-tailwind/dist/index.css'
+```
+
 ## Usage
 
 ```tsx
diff --git a/packages/store-ui/src/atoms/Slider/README.md b/packages/store-ui/src/atoms/Slider/README.md
index 5e4951d384..3a9fff77ce 100644
--- a/packages/store-ui/src/atoms/Slider/README.md
+++ b/packages/store-ui/src/atoms/Slider/README.md
@@ -1,28 +1,5 @@
 # Slider
 
-## Installation
-
-From the command line in your project directory, run npm install `@vtex/store-ui` or yarn add `@vtex/store-ui`.
-
-```cmd
-npm install @vtex/store-ui
-# or
-yarn add @vtex/store-ui
-```
-
-For style, you can install our default theme, run npm install `@vtex/theme-b2c-tailwind` or yarn add `@vtex/theme-b2c-tailwind`:
-
-```cmd
-npm install @vtex/theme-b2c-tailwind
-# or
-yarn add @vtex/theme-b2c-tailwind
-```
-
-```tsx
-import { Slider } from '@vtex/store-ui'
-import '@vtex/theme-b2c-tailwind/dist/index.css'
-```
-
 ## Usage
 
 ```tsx

From 226d5048d63ccdbb6e9f244b2e3532147ae5c516 Mon Sep 17 00:00:00 2001
From: Emerson Laurentino <emerson@laurentino.co>
Date: Thu, 26 Aug 2021 11:51:26 -0300
Subject: [PATCH 07/17] chore(store-ui): remove readme in order to use story

---
 packages/store-ui/src/atoms/Slider/README.md  | 60 -------------------
 .../src/atoms/Slider/stories/Slider.mdx       | 23 +++++++
 2 files changed, 23 insertions(+), 60 deletions(-)
 delete mode 100644 packages/store-ui/src/atoms/Slider/README.md

diff --git a/packages/store-ui/src/atoms/Slider/README.md b/packages/store-ui/src/atoms/Slider/README.md
deleted file mode 100644
index 3a9fff77ce..0000000000
--- a/packages/store-ui/src/atoms/Slider/README.md
+++ /dev/null
@@ -1,60 +0,0 @@
-# Slider
-
-## Usage
-
-```tsx
-import { Slider } from '@vtex/store-ui'
-
-function Example() {
-  return (
-    <div>
-      <Slider min={0} max={100} />
-    </div>
-  )
-}
-```
-
-## API
-
-### Component
-
-```tsx
-<Slider min={0} max={100} />
-```
-
-### CSS Selectors
-
-```css
-[data-store-slider] {
-}
-[data-store-slider-range] {
-}
-[data-store-slider-track] {
-}
-[data-store-slider-thumb='(left|right)'] {
-}
-[data-store-slider-values] {
-}
-[data-store-slider-value='(min|max)'] {
-}
-```
-
-### Props
-
-| Prop             | Type    | Required | Default      |
-| ---------------- | ------- | -------- | ------------ |
-| min              | number  | true     |              |
-| max              | number  | true     |              |
-| showValues       | boolean | false    | true         |
-| testId           | string  | false    | store-slider |
-| onChange         | void    | false    |              |
-| onChange         | void    | false    |              |
-| onChange         | void    | false    |              |
-| ariaLabel        | string  | false    |              |
-| getAriaValueText | void    | false    |              |
-
-## TODO
-
-- [ ] [Keyboard Interaction](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb_kbd_interaction)
-- [ ] More test cases
-- [ ] Support to orientation
diff --git a/packages/store-ui/src/atoms/Slider/stories/Slider.mdx b/packages/store-ui/src/atoms/Slider/stories/Slider.mdx
index 898c33eb05..25b2fb54b9 100644
--- a/packages/store-ui/src/atoms/Slider/stories/Slider.mdx
+++ b/packages/store-ui/src/atoms/Slider/stories/Slider.mdx
@@ -10,3 +10,26 @@ import Slider from '../Slider'
 # Props
 
 <ArgsTable of={Slider} />
+
+# CSS Selectors
+
+```css
+[data-store-slider] {
+}
+[data-store-slider-range] {
+}
+[data-store-slider-track] {
+}
+[data-store-slider-thumb='(left|right)'] {
+}
+[data-store-slider-values] {
+}
+[data-store-slider-value='(min|max)'] {
+}
+```
+
+# TODO
+
+- [ ] [Keyboard Interaction](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb_kbd_interaction)
+- [ ] More test cases
+- [ ] Support to orientation

From 07e706823d55767fc82399ad13655d4493d984fa Mon Sep 17 00:00:00 2001
From: Emerson Laurentino <emerson@laurentino.co>
Date: Thu, 26 Aug 2021 11:53:45 -0300
Subject: [PATCH 08/17] chore(store-ui): improve message to use style

---
 packages/store-ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/store-ui/README.md b/packages/store-ui/README.md
index 5d99a2fb46..d6347fe474 100644
--- a/packages/store-ui/README.md
+++ b/packages/store-ui/README.md
@@ -14,7 +14,7 @@ npm install @vtex/store-ui
 yarn add @vtex/store-ui
 ```
 
-For style, you can install our default theme, run npm install `@vtex/theme-b2c-tailwind` or yarn add `@vtex/theme-b2c-tailwind`:
+For style, you can use our default theme. To install:
 
 ```cmd
 npm install @vtex/theme-b2c-tailwind

From 72db6d109b2b3871818988e952c0a07b27eb8e82 Mon Sep 17 00:00:00 2001
From: Emerson Laurentino <emerson@laurentino.co>
Date: Thu, 26 Aug 2021 12:01:10 -0300
Subject: [PATCH 09/17] chore(store-ui): add credits of code

---
 packages/store-ui/src/atoms/Slider/Slider.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/store-ui/src/atoms/Slider/Slider.tsx b/packages/store-ui/src/atoms/Slider/Slider.tsx
index 282d220722..a72015bf1d 100644
--- a/packages/store-ui/src/atoms/Slider/Slider.tsx
+++ b/packages/store-ui/src/atoms/Slider/Slider.tsx
@@ -1,3 +1,7 @@
+/**
+ * This code is inspired by the work of [sandra-lewis](https://codesandbox.io/u/sandra-lewis)
+ */
+
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
 export type SliderProps = {

From dec9da71d790837c16a87e3b02928208d968f074 Mon Sep 17 00:00:00 2001
From: Emerson Laurentino <emerson@laurentino.co>
Date: Thu, 26 Aug 2021 12:02:11 -0300
Subject: [PATCH 10/17] chore(store-ui): add comments to useEffect

---
 packages/store-ui/src/atoms/Slider/Slider.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/store-ui/src/atoms/Slider/Slider.tsx b/packages/store-ui/src/atoms/Slider/Slider.tsx
index a72015bf1d..9737548b5a 100644
--- a/packages/store-ui/src/atoms/Slider/Slider.tsx
+++ b/packages/store-ui/src/atoms/Slider/Slider.tsx
@@ -60,6 +60,7 @@ const Slider = ({
     [min, max]
   )
 
+  // width of the range to reduce from the left side
   useEffect(() => {
     const minPercent = getPercent(minVal)
     const maxPercent = getPercent(maxValRef.current)
@@ -70,6 +71,7 @@ const Slider = ({
     }
   }, [minVal, getPercent])
 
+  // width of the range to reduce from the right side
   useEffect(() => {
     const minPercent = getPercent(minValRef.current)
     const maxPercent = getPercent(maxVal)

From 643d3787be12674025f20a5378885f2e555e8b39 Mon Sep 17 00:00:00 2001
From: Emerson Laurentino <emerson@laurentino.co>
Date: Thu, 26 Aug 2021 12:08:05 -0300
Subject: [PATCH 11/17] fix(theme-b2c-tailwind): margin of slider thumb

---
 themes/theme-b2c-tailwind/src/atoms/slider.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/themes/theme-b2c-tailwind/src/atoms/slider.css b/themes/theme-b2c-tailwind/src/atoms/slider.css
index 01ec98c639..6c0a6e6ede 100644
--- a/themes/theme-b2c-tailwind/src/atoms/slider.css
+++ b/themes/theme-b2c-tailwind/src/atoms/slider.css
@@ -43,11 +43,11 @@
 }
 
 [data-store-slider-thumb='left']::-webkit-slider-thumb {
-  @apply -ml-1;
+  @apply -ml-2;
 }
 
 [data-store-slider-thumb='right']::-webkit-slider-thumb {
-  @apply -mr-1;
+  @apply -mr-2;
 }
 
 /* For Firefox browsers */

From 65fed7114f30f45883b1c09b07a2dd581b194c41 Mon Sep 17 00:00:00 2001
From: Emerson Laurentino <emerson@laurentino.co>
Date: Mon, 30 Aug 2021 10:43:40 -0300
Subject: [PATCH 12/17] docs(store-ui): fix usage example

---
 packages/store-ui/README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/store-ui/README.md b/packages/store-ui/README.md
index d6347fe474..04f711b67f 100644
--- a/packages/store-ui/README.md
+++ b/packages/store-ui/README.md
@@ -22,13 +22,13 @@ npm install @vtex/theme-b2c-tailwind
 yarn add @vtex/theme-b2c-tailwind
 ```
 
+## Usage
+
 ```tsx
-import { Slider } from '@vtex/store-ui'
+import { Button } from '@vtex/store-ui'
 import '@vtex/theme-b2c-tailwind/dist/index.css'
 ```
 
-## Usage
-
 ```tsx
 import React, { Component } from 'react'
 

From b0a7db8828cce4ba810685fe3f29effeff16290a Mon Sep 17 00:00:00 2001
From: Emerson Laurentino <emerson@laurentino.co>
Date: Mon, 30 Aug 2021 10:49:36 -0300
Subject: [PATCH 13/17] fix(store-ui): remove style from slider

---
 packages/store-ui/src/atoms/Slider/Slider.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/store-ui/src/atoms/Slider/Slider.tsx b/packages/store-ui/src/atoms/Slider/Slider.tsx
index 9737548b5a..332af4d485 100644
--- a/packages/store-ui/src/atoms/Slider/Slider.tsx
+++ b/packages/store-ui/src/atoms/Slider/Slider.tsx
@@ -107,7 +107,6 @@ const Slider = ({
             minValRef.current = value
           }}
           data-store-slider-thumb="left"
-          style={{ zIndex: minVal > max - 100 ? 5 : 'auto' }}
           aria-valuemin={min}
           aria-valuemax={max}
           aria-valuenow={minVal}

From 529d50d936ba5a903f812c9cec314e219d1b4dcf Mon Sep 17 00:00:00 2001
From: Emerson Laurentino <emerson@laurentino.co>
Date: Mon, 30 Aug 2021 11:41:20 -0300
Subject: [PATCH 14/17] fix(store-ui): remove show values from slider

---
 packages/store-ui/src/atoms/Slider/Slider.tsx | 93 ++++++++-----------
 .../src/atoms/Slider/stories/Slider.mdx       |  8 +-
 .../theme-b2c-tailwind/src/atoms/slider.css   | 10 +-
 3 files changed, 41 insertions(+), 70 deletions(-)

diff --git a/packages/store-ui/src/atoms/Slider/Slider.tsx b/packages/store-ui/src/atoms/Slider/Slider.tsx
index 332af4d485..472fce4a56 100644
--- a/packages/store-ui/src/atoms/Slider/Slider.tsx
+++ b/packages/store-ui/src/atoms/Slider/Slider.tsx
@@ -13,12 +13,6 @@ export type SliderProps = {
    * The maximum value of the slider.
    */
   max: number
-  /**
-   * Show selected values.
-   *
-   * @default true
-   */
-  showValues?: boolean
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    *
@@ -44,7 +38,6 @@ const Slider = ({
   max,
   onChange,
   testId = 'store-slider',
-  showValues = true,
   ariaLabel,
   getAriaValueText,
 }: SliderProps) => {
@@ -93,55 +86,47 @@ const Slider = ({
       // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
       role="slider"
     >
-      <div data-store-slider-range>
-        <div ref={range} data-store-slider-track />
-        <input
-          type="range"
-          min={min}
-          max={max}
-          value={minVal}
-          onChange={(event) => {
-            const value = Math.min(Number(event.target.value), maxVal - 1)
+      <div ref={range} data-store-slider-range />
+      <input
+        type="range"
+        min={min}
+        max={max}
+        value={minVal}
+        onChange={(event) => {
+          const value = Math.min(Number(event.target.value), maxVal - 1)
 
-            setMinVal(value)
-            minValRef.current = value
-          }}
-          data-store-slider-thumb="left"
-          aria-valuemin={min}
-          aria-valuemax={max}
-          aria-valuenow={minVal}
-          aria-label={String(minVal)}
-          aria-labelledby={
-            getAriaValueText ? getAriaValueText(minVal, 'min') : undefined
-          }
-        />
-        <input
-          type="range"
-          min={min}
-          max={max}
-          value={maxVal}
-          onChange={(event) => {
-            const value = Math.max(Number(event.target.value), minVal + 1)
+          setMinVal(value)
+          minValRef.current = value
+        }}
+        data-store-slider-thumb="left"
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={minVal}
+        aria-label={String(minVal)}
+        aria-labelledby={
+          getAriaValueText ? getAriaValueText(minVal, 'min') : undefined
+        }
+      />
+      <input
+        type="range"
+        min={min}
+        max={max}
+        value={maxVal}
+        onChange={(event) => {
+          const value = Math.max(Number(event.target.value), minVal + 1)
 
-            setMaxVal(value)
-            maxValRef.current = value
-          }}
-          data-store-slider-thumb="right"
-          aria-valuemin={min}
-          aria-valuemax={max}
-          aria-valuenow={maxVal}
-          aria-label={String(maxVal)}
-          aria-labelledby={
-            getAriaValueText ? getAriaValueText(maxVal, 'max') : undefined
-          }
-        />
-      </div>
-      {showValues && (
-        <div data-store-slider-values>
-          <div data-store-slider-value="min">{minVal}</div>
-          <div data-store-slider-value="max">{maxVal}</div>
-        </div>
-      )}
+          setMaxVal(value)
+          maxValRef.current = value
+        }}
+        data-store-slider-thumb="right"
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={maxVal}
+        aria-label={String(maxVal)}
+        aria-labelledby={
+          getAriaValueText ? getAriaValueText(maxVal, 'max') : undefined
+        }
+      />
     </div>
   )
 }
diff --git a/packages/store-ui/src/atoms/Slider/stories/Slider.mdx b/packages/store-ui/src/atoms/Slider/stories/Slider.mdx
index 25b2fb54b9..99fb936b0a 100644
--- a/packages/store-ui/src/atoms/Slider/stories/Slider.mdx
+++ b/packages/store-ui/src/atoms/Slider/stories/Slider.mdx
@@ -1,7 +1,7 @@
 import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
 import Slider from '../Slider'
 
-# Preview
+# Slider
 
 <Canvas>
   <Story id="atoms-slider--slider" />
@@ -18,14 +18,8 @@ import Slider from '../Slider'
 }
 [data-store-slider-range] {
 }
-[data-store-slider-track] {
-}
 [data-store-slider-thumb='(left|right)'] {
 }
-[data-store-slider-values] {
-}
-[data-store-slider-value='(min|max)'] {
-}
 ```
 
 # TODO
diff --git a/themes/theme-b2c-tailwind/src/atoms/slider.css b/themes/theme-b2c-tailwind/src/atoms/slider.css
index 6c0a6e6ede..4081491dbf 100644
--- a/themes/theme-b2c-tailwind/src/atoms/slider.css
+++ b/themes/theme-b2c-tailwind/src/atoms/slider.css
@@ -1,20 +1,12 @@
 [data-store-slider] {
-  @apply py-2 px-1 w-full;
+  @apply bg-gray-200 rounded-full relative h-2 w-full m-2;
 }
 
 [data-store-slider-range] {
-  @apply bg-gray-200 rounded-full relative h-2 w-full;
-}
-
-[data-store-slider-track] {
   @apply bg-blue-500 absolute;
   height: inherit;
 }
 
-[data-store-slider-values] {
-  @apply mt-4 flex justify-between;
-}
-
 /* Removing the default appearance */
 [data-store-slider-thumb],
 [data-store-slider-thumb]::-webkit-slider-thumb {

From d49defb1c57ae3edb31baa1a091a76aadfa4ecd7 Mon Sep 17 00:00:00 2001
From: Emerson Laurentino <emerson@laurentino.co>
Date: Mon, 30 Aug 2021 12:01:49 -0300
Subject: [PATCH 15/17] feat(store-ui): classname to slider

---
 packages/store-ui/src/atoms/Slider/Slider.tsx  | 6 ++++++
 themes/theme-b2c-tailwind/src/atoms/slider.css | 6 +-----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/store-ui/src/atoms/Slider/Slider.tsx b/packages/store-ui/src/atoms/Slider/Slider.tsx
index 472fce4a56..d41fe4239d 100644
--- a/packages/store-ui/src/atoms/Slider/Slider.tsx
+++ b/packages/store-ui/src/atoms/Slider/Slider.tsx
@@ -31,6 +31,10 @@ export type SliderProps = {
    * A function used to set a human-readable value text based on the slider's current value.
    */
   getAriaValueText?(value: number, thumb?: 'min' | 'max'): string
+  /**
+   * Returns the value of element's class content attribute.
+   */
+  className?: string
 }
 
 const Slider = ({
@@ -40,6 +44,7 @@ const Slider = ({
   testId = 'store-slider',
   ariaLabel,
   getAriaValueText,
+  className,
 }: SliderProps) => {
   const [minVal, setMinVal] = useState(min)
   const [maxVal, setMaxVal] = useState(max)
@@ -85,6 +90,7 @@ const Slider = ({
       aria-label={ariaLabel}
       // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
       role="slider"
+      className={className}
     >
       <div ref={range} data-store-slider-range />
       <input
diff --git a/themes/theme-b2c-tailwind/src/atoms/slider.css b/themes/theme-b2c-tailwind/src/atoms/slider.css
index 4081491dbf..9a8daec5b7 100644
--- a/themes/theme-b2c-tailwind/src/atoms/slider.css
+++ b/themes/theme-b2c-tailwind/src/atoms/slider.css
@@ -1,5 +1,5 @@
 [data-store-slider] {
-  @apply bg-gray-200 rounded-full relative h-2 w-full m-2;
+  @apply bg-gray-200 rounded-full relative h-2 w-full;
 }
 
 [data-store-slider-range] {
@@ -38,10 +38,6 @@
   @apply -ml-2;
 }
 
-[data-store-slider-thumb='right']::-webkit-slider-thumb {
-  @apply -mr-2;
-}
-
 /* For Firefox browsers */
 [data-store-slider-thumb]::-moz-range-thumb {
   @apply bg-gray-100 border-none rounded-full pointer-events-auto h-4 w-4 relative mt-1;

From ef2cf83c7c6b02a94c8815805948a9aba0477d4d Mon Sep 17 00:00:00 2001
From: Emerson Laurentino <emerson@laurentino.co>
Date: Mon, 30 Aug 2021 12:03:36 -0300
Subject: [PATCH 16/17] fix(store-ui): remove showvalues from slider

---
 packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx b/packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx
index 92d8b1d818..2dc2872ddb 100644
--- a/packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx
+++ b/packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx
@@ -19,10 +19,6 @@ const argTypes: ComponentArgTypes<SliderProps> = {
     control: { type: 'text' },
     defaultValue: '500',
   },
-  showValues: {
-    control: { type: 'boolean' },
-    defaultValue: true,
-  },
 }
 
 export default {

From 3e2f791f338b44ab6ab9f98720b3da7c05570d73 Mon Sep 17 00:00:00 2001
From: Emerson Laurentino <emerson@laurentino.co>
Date: Mon, 30 Aug 2021 12:20:03 -0300
Subject: [PATCH 17/17] fix(store-ui): type control

---
 .../store-ui/src/atoms/Slider/stories/Slider.stories.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx b/packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx
index 2dc2872ddb..0ee40424ba 100644
--- a/packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx
+++ b/packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx
@@ -12,12 +12,12 @@ export const Slider = SliderTemplate.bind({})
 
 const argTypes: ComponentArgTypes<SliderProps> = {
   min: {
-    control: { type: 'text' },
-    defaultValue: '0',
+    control: { type: 'number', min: 0 },
+    defaultValue: 0,
   },
   max: {
-    control: { type: 'text' },
-    defaultValue: '500',
+    control: { type: 'number', min: 1 },
+    defaultValue: 500,
   },
 }