diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c2cffa225..8abb4de9ca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Split action handlers with "OR" condition in accessibility behaviors @sophieH29 ([#1622](https://github.com/stardust-ui/react/pull/1622))
 - Add `headerAction` slot to the `Dialog` component @mnajdova ([#1617](https://github.com/stardust-ui/react/pull/1617))
+- Add `Slider` component @Bugaa92 ([#1559](https://github.com/stardust-ui/react/pull/1559))
 
 <!--------------------------------[ v0.34.1 ]------------------------------- -->
 ## [v0.34.1](https://github.com/stardust-ui/react/tree/v0.34.1) (2019-07-11)
diff --git a/docs/src/examples/components/Slider/Playground.tsx b/docs/src/examples/components/Slider/Playground.tsx
new file mode 100644
index 0000000000..abaa7fed81
--- /dev/null
+++ b/docs/src/examples/components/Slider/Playground.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { Slider } from '@stardust-ui/react'
+import { useBooleanKnob, useStringKnob } from '@stardust-ui/docs-components'
+
+const SliderPlayground: React.FunctionComponent = () => {
+  const [min] = useStringKnob({ name: 'min', initialValue: '0' })
+  const [max] = useStringKnob({ name: 'max', initialValue: '50' })
+  const [step] = useStringKnob({ name: 'step', initialValue: '1' })
+  const [value, setValue] = useStringKnob({ name: 'value', initialValue: '10' })
+
+  const [disabled] = useBooleanKnob({ name: 'disabled' })
+  const [fluid] = useBooleanKnob({ name: 'fluid' })
+  const [vertical] = useBooleanKnob({ name: 'vertical' })
+
+  return (
+    <Slider
+      disabled={disabled}
+      fluid={fluid}
+      min={min}
+      max={max}
+      step={step}
+      value={value}
+      vertical={vertical}
+      onChange={(e, data) => setValue(data.value)}
+    />
+  )
+}
+
+export default SliderPlayground
diff --git a/docs/src/examples/components/Slider/Rtl/SliderExample.rtl.steps.ts b/docs/src/examples/components/Slider/Rtl/SliderExample.rtl.steps.ts
new file mode 100644
index 0000000000..5262188359
--- /dev/null
+++ b/docs/src/examples/components/Slider/Rtl/SliderExample.rtl.steps.ts
@@ -0,0 +1,8 @@
+import getScreenerSteps from '../commonScreenerSteps'
+
+const config: ScreenerTestsConfig = {
+  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
+  steps: getScreenerSteps(),
+}
+
+export default config
diff --git a/docs/src/examples/components/Slider/Rtl/SliderExample.rtl.tsx b/docs/src/examples/components/Slider/Rtl/SliderExample.rtl.tsx
new file mode 100644
index 0000000000..a941ffb404
--- /dev/null
+++ b/docs/src/examples/components/Slider/Rtl/SliderExample.rtl.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Slider } from '@stardust-ui/react'
+
+const SliderExampleRtl = () => <Slider />
+
+export default SliderExampleRtl
diff --git a/docs/src/examples/components/Slider/Rtl/index.tsx b/docs/src/examples/components/Slider/Rtl/index.tsx
new file mode 100644
index 0000000000..09aaa1fa46
--- /dev/null
+++ b/docs/src/examples/components/Slider/Rtl/index.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import NonPublicSection from 'docs/src/components/ComponentDoc/NonPublicSection'
+
+const Rtl = () => (
+  <NonPublicSection title="Rtl">
+    <ComponentExample examplePath="components/Slider/Rtl/SliderExample.rtl" />
+  </NonPublicSection>
+)
+
+export default Rtl
diff --git a/docs/src/examples/components/Slider/States/SliderExampleDisabled.shorthand.tsx b/docs/src/examples/components/Slider/States/SliderExampleDisabled.shorthand.tsx
new file mode 100644
index 0000000000..6dbc8f8343
--- /dev/null
+++ b/docs/src/examples/components/Slider/States/SliderExampleDisabled.shorthand.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Slider } from '@stardust-ui/react'
+
+const SliderExampleDisabledShorthand = () => <Slider disabled />
+
+export default SliderExampleDisabledShorthand
diff --git a/docs/src/examples/components/Slider/States/index.tsx b/docs/src/examples/components/Slider/States/index.tsx
new file mode 100644
index 0000000000..bf71e865b9
--- /dev/null
+++ b/docs/src/examples/components/Slider/States/index.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const States = () => (
+  <ExampleSection title="States">
+    <ComponentExample
+      title="Disabled"
+      description="A slider can be read-only and unable to change states."
+      examplePath="components/Slider/States/SliderExampleDisabled"
+    />
+  </ExampleSection>
+)
+
+export default States
diff --git a/docs/src/examples/components/Slider/Types/SliderExample.shorthand.steps.ts b/docs/src/examples/components/Slider/Types/SliderExample.shorthand.steps.ts
new file mode 100644
index 0000000000..5262188359
--- /dev/null
+++ b/docs/src/examples/components/Slider/Types/SliderExample.shorthand.steps.ts
@@ -0,0 +1,8 @@
+import getScreenerSteps from '../commonScreenerSteps'
+
+const config: ScreenerTestsConfig = {
+  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
+  steps: getScreenerSteps(),
+}
+
+export default config
diff --git a/docs/src/examples/components/Slider/Types/SliderExample.shorthand.tsx b/docs/src/examples/components/Slider/Types/SliderExample.shorthand.tsx
new file mode 100644
index 0000000000..14f33505a7
--- /dev/null
+++ b/docs/src/examples/components/Slider/Types/SliderExample.shorthand.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Slider } from '@stardust-ui/react'
+
+const SliderExampleShorthand = () => <Slider />
+
+export default SliderExampleShorthand
diff --git a/docs/src/examples/components/Slider/Types/index.tsx b/docs/src/examples/components/Slider/Types/index.tsx
new file mode 100644
index 0000000000..43195a394e
--- /dev/null
+++ b/docs/src/examples/components/Slider/Types/index.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Default"
+      description="A default slider."
+      examplePath="components/Slider/Types/SliderExample"
+    />
+  </ExampleSection>
+)
+
+export default Types
diff --git a/docs/src/examples/components/Slider/Usage/SliderExampleAction.shorthand.tsx b/docs/src/examples/components/Slider/Usage/SliderExampleAction.shorthand.tsx
new file mode 100644
index 0000000000..ad667c5e32
--- /dev/null
+++ b/docs/src/examples/components/Slider/Usage/SliderExampleAction.shorthand.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { Button, Input, Slider, Flex } from '@stardust-ui/react'
+import { useBooleanKnob } from '@stardust-ui/docs-components'
+
+interface SliderAction {
+  type: 'toggle_mute' | 'change_value'
+  value?: string | number
+}
+
+interface SliderState {
+  mute: boolean
+  value: string | number
+  currentValue: string | number
+  minValue: string | number
+}
+
+const stateReducer = (state: SliderState, action: SliderAction) => {
+  switch (action.type) {
+    case 'toggle_mute':
+      const mute = !state.mute
+      const value = mute ? state.minValue : state.currentValue
+
+      if (!mute && value <= state.minValue) return { ...state }
+      return { ...state, mute, value, currentValue: state.value }
+
+    case 'change_value':
+      return { ...state, mute: action.value <= state.minValue, value: action.value }
+
+    default:
+      throw new Error(`Action ${action.type} is not supported`)
+  }
+}
+
+const SliderExampleActionShorthand = () => {
+  const [vertical] = useBooleanKnob({ name: 'vertical', initialValue: false })
+  const { min, max } = { min: 0, max: 100 }
+
+  const [state, dispatch] = React.useReducer(stateReducer, {
+    mute: false,
+    value: min + (max - min) / 2,
+    currentValue: min,
+    minValue: min,
+  })
+
+  const handeChange = React.useCallback(
+    (e, data) => dispatch({ type: 'change_value', value: data.value }),
+    [],
+  )
+
+  const commonProps = { vertical, min, max, value: state.value, onChange: handeChange }
+
+  return (
+    <Flex inline hAlign="center" vAlign="center" gap="gap.smaller" column={vertical}>
+      <Button
+        text
+        iconOnly
+        icon={state.mute ? 'mic-off' : 'mic'}
+        onClick={() => dispatch({ type: 'toggle_mute' })}
+      />
+      <Slider {...commonProps} />
+      <Input type="number" input={{ styles: { width: '64px' } }} {...commonProps} />
+    </Flex>
+  )
+}
+
+export default SliderExampleActionShorthand
diff --git a/docs/src/examples/components/Slider/Usage/index.tsx b/docs/src/examples/components/Slider/Usage/index.tsx
new file mode 100644
index 0000000000..e717553304
--- /dev/null
+++ b/docs/src/examples/components/Slider/Usage/index.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Usage = () => (
+  <ExampleSection title="Usage">
+    <ComponentExample
+      title="Slider with action element and input"
+      description={
+        <div>
+          <span>This example contains:</span>
+          <ul>
+            <li>
+              a <code>Slider</code> that allows the user to choose a value from within a specific
+              range of values.
+            </li>
+            <li>
+              a <code>Button</code> that changes its icon and toggles the <code>Slider</code> value
+              when clicked (between current value and minimum value).
+            </li>
+            <li>
+              an <code>Input</code> that changes and displays the current <code>Slider</code> value.
+            </li>
+          </ul>
+        </div>
+      }
+      examplePath="components/Slider/Usage/SliderExampleAction"
+    />
+  </ExampleSection>
+)
+
+export default Usage
diff --git a/docs/src/examples/components/Slider/Variations/SliderExampleFluid.shorthand.tsx b/docs/src/examples/components/Slider/Variations/SliderExampleFluid.shorthand.tsx
new file mode 100644
index 0000000000..eae5fd0f5d
--- /dev/null
+++ b/docs/src/examples/components/Slider/Variations/SliderExampleFluid.shorthand.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Slider } from '@stardust-ui/react'
+
+const SliderExampleFluidShorthand = () => <Slider fluid />
+
+export default SliderExampleFluidShorthand
diff --git a/docs/src/examples/components/Slider/Variations/SliderExampleVertical.shorthand.tsx b/docs/src/examples/components/Slider/Variations/SliderExampleVertical.shorthand.tsx
new file mode 100644
index 0000000000..019af1779e
--- /dev/null
+++ b/docs/src/examples/components/Slider/Variations/SliderExampleVertical.shorthand.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Slider } from '@stardust-ui/react'
+
+const SliderExampleVerticalShorthand = () => <Slider vertical />
+
+export default SliderExampleVerticalShorthand
diff --git a/docs/src/examples/components/Slider/Variations/index.tsx b/docs/src/examples/components/Slider/Variations/index.tsx
new file mode 100644
index 0000000000..1c711196e9
--- /dev/null
+++ b/docs/src/examples/components/Slider/Variations/index.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Variations = () => (
+  <ExampleSection title="Variations">
+    <ComponentExample
+      title="Vertical"
+      description="A slider can be displayed vertically."
+      examplePath="components/Slider/Variations/SliderExampleVertical"
+    />
+    <ComponentExample
+      title="Fluid"
+      description="A slider can take up the width of its container."
+      examplePath="components/Slider/Variations/SliderExampleFluid"
+    />
+  </ExampleSection>
+)
+
+export default Variations
diff --git a/docs/src/examples/components/Slider/commonScreenerSteps.ts b/docs/src/examples/components/Slider/commonScreenerSteps.ts
new file mode 100644
index 0000000000..84fa4c65a8
--- /dev/null
+++ b/docs/src/examples/components/Slider/commonScreenerSteps.ts
@@ -0,0 +1,29 @@
+import { Slider } from '@stardust-ui/react/src'
+
+const selectors = {
+  input: `.${Slider.slotClassNames.input}`,
+}
+
+const focusSliderStep: ScreenerStep = (builder, keys) => builder.keys('body', keys.tab)
+
+const getScreenerSteps = (): ScreenerSteps => [
+  (builder, keys) => focusSliderStep(builder, keys).snapshot('Focuses the slider'),
+  (builder, keys) =>
+    focusSliderStep(builder, keys)
+      .keys(selectors.input, keys.rightArrow)
+      .keys(selectors.input, keys.rightArrow)
+      .keys(selectors.input, keys.rightArrow)
+      .keys(selectors.input, keys.rightArrow)
+      .keys(selectors.input, keys.rightArrow)
+      .snapshot('Navigates to the right with the right arrow key'),
+  (builder, keys) =>
+    focusSliderStep(builder, keys)
+      .keys(selectors.input, keys.upArrow)
+      .keys(selectors.input, keys.upArrow)
+      .keys(selectors.input, keys.upArrow)
+      .keys(selectors.input, keys.upArrow)
+      .keys(selectors.input, keys.upArrow)
+      .snapshot('Navigates to the right with the up arrow key'),
+]
+
+export default getScreenerSteps
diff --git a/docs/src/examples/components/Slider/index.tsx b/docs/src/examples/components/Slider/index.tsx
new file mode 100644
index 0000000000..1ca31166b6
--- /dev/null
+++ b/docs/src/examples/components/Slider/index.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+import Types from './Types'
+import States from './States'
+import Variations from './Variations'
+import Usage from './Usage'
+import Rtl from './Rtl'
+
+const SliderExamples = () => (
+  <>
+    <Types />
+    <States />
+    <Variations />
+    <Usage />
+    <Rtl />
+  </>
+)
+
+export default SliderExamples
diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx
index 93e8844e5e..6215a762f1 100644
--- a/packages/react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/react/src/components/Checkbox/Checkbox.tsx
@@ -17,6 +17,7 @@ import Icon from '../Icon/Icon'
 import Text from '../Text/Text'
 import { Accessibility } from '../../lib/accessibility/types'
 import { checkboxBehavior } from '../../lib/accessibility'
+import { SupportedIntrinsicInputProps } from '../../lib/htmlPropsUtils'
 
 export interface CheckboxProps extends UIComponentProps, ChildrenComponentProps {
   /**
@@ -26,13 +27,13 @@ export interface CheckboxProps extends UIComponentProps, ChildrenComponentProps
   accessibility?: Accessibility
 
   /** Initial checked value. */
-  defaultChecked?: boolean
+  defaultChecked?: SupportedIntrinsicInputProps['defaultChecked']
 
   /** Whether or not item is checked. */
-  checked?: boolean
+  checked?: SupportedIntrinsicInputProps['checked']
 
   /** An item can appear disabled and be unable to change states. */
-  disabled?: boolean
+  disabled?: SupportedIntrinsicInputProps['disabled']
 
   /** The item indicator can be user-defined icon. */
   icon?: ShorthandValue
@@ -62,7 +63,7 @@ export interface CheckboxProps extends UIComponentProps, ChildrenComponentProps
 }
 
 export interface CheckboxState {
-  checked: boolean
+  checked: CheckboxProps['checked']
   isFromKeyboard: boolean
 }
 
diff --git a/packages/react/src/components/Input/Input.tsx b/packages/react/src/components/Input/Input.tsx
index ad213b7724..7e236e2f14 100644
--- a/packages/react/src/components/Input/Input.tsx
+++ b/packages/react/src/components/Input/Input.tsx
@@ -16,21 +16,15 @@ import {
 } from '../../lib'
 import { Accessibility } from '../../lib/accessibility/types'
 import { inputBehavior } from '../../lib/accessibility'
+import { SupportedIntrinsicInputProps } from '../../lib/htmlPropsUtils'
 import { WithAsProp, ShorthandValue, ComponentEventHandler, withSafeTypeForAs } from '../../types'
 import Icon from '../Icon/Icon'
 import Box from '../Box/Box'
-import { HtmlInputProps } from '../../lib/htmlPropsUtils'
 
 export interface InputSlotClassNames {
   input: string
 }
 
-type SupportedIntrinsicInputProps = {
-  [K in HtmlInputProps]?: K extends keyof JSX.IntrinsicElements['input']
-    ? JSX.IntrinsicElements['input'][K]
-    : any
-}
-
 export interface InputProps
   extends UIComponentProps,
     ChildrenComponentProps,
@@ -67,7 +61,7 @@ export interface InputProps
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props and proposed value.
    */
-  onChange?: ComponentEventHandler<InputProps>
+  onChange?: ComponentEventHandler<InputProps & { value: string }>
 
   /** The HTML input type. */
   type?: string
@@ -76,14 +70,14 @@ export interface InputProps
   inputRef?: React.Ref<HTMLElement>
 
   /** The value of the input. */
-  value?: React.ReactText
+  value?: string | number
 
   /** Shorthand for the wrapper component. */
   wrapper?: ShorthandValue
 }
 
 export interface InputState {
-  value?: React.ReactText
+  value?: InputProps['value']
 }
 
 class Input extends AutoControlledComponent<WithAsProp<InputProps>, InputState> {
@@ -194,7 +188,7 @@ class Input extends AutoControlledComponent<WithAsProp<InputProps>, InputState>
     },
   })
 
-  handleChange = (e: React.SyntheticEvent) => {
+  handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = _.get(e, 'target.value')
 
     _.invoke(this.props, 'onChange', e, { ...this.props, value })
diff --git a/packages/react/src/components/Slider/Slider.tsx b/packages/react/src/components/Slider/Slider.tsx
new file mode 100644
index 0000000000..ce5b32fe5a
--- /dev/null
+++ b/packages/react/src/components/Slider/Slider.tsx
@@ -0,0 +1,267 @@
+import * as React from 'react'
+import * as _ from 'lodash'
+import * as PropTypes from 'prop-types'
+import * as customPropTypes from '@stardust-ui/react-proptypes'
+import { handleRef, Ref } from '@stardust-ui/react-component-ref'
+import cx from 'classnames'
+
+import {
+  applyAccessibilityKeyHandlers,
+  AutoControlledComponent,
+  ChildrenComponentProps,
+  commonPropTypes,
+  isFromKeyboard,
+  partitionHTMLProps,
+  UIComponentProps,
+  RenderResultConfig,
+  setWhatInputSource,
+} from '../../lib'
+import {
+  ComponentEventHandler,
+  ShorthandValue,
+  WithAsProp,
+  withSafeTypeForAs,
+  Omit,
+} from '../../types'
+import { Accessibility } from '../../lib/accessibility/types'
+import { sliderBehavior } from '../../lib/accessibility'
+import { SupportedIntrinsicInputProps } from '../../lib/htmlPropsUtils'
+import Box from '../Box/Box'
+
+const processInputValues = (
+  p: Pick<SliderProps, 'min' | 'max'> & Pick<SliderState, 'value'>,
+): { min: number; max: number; value: number; valueAsPercentage: string } => {
+  let min = _.toNumber(p.min)
+  let max = _.toNumber(p.max)
+  let value = _.toNumber(p.value)
+
+  if (isNaN(min)) min = Number(Slider.defaultProps.min)
+  if (isNaN(max)) max = Number(Slider.defaultProps.max)
+  value = isNaN(value) ? min + (max - min) / 2 : Math.min(max, Math.max(min, value))
+  const valueAsPercentage = `${(100 * (value - min)) / (max - min)}%`
+
+  return { min, max, value, valueAsPercentage }
+}
+
+export interface SliderSlotClassNames {
+  input: string
+  inputWrapper: string
+  rail: string
+  thumb: string
+  track: string
+}
+
+export interface SliderProps
+  extends UIComponentProps,
+    ChildrenComponentProps,
+    Omit<SupportedIntrinsicInputProps, 'defaultValue'> {
+  /**
+   * Accessibility behavior if overridden by the user.
+   * @default sliderBehavior
+   */
+  accessibility?: Accessibility
+
+  /** The default value of the slider. */
+  defaultValue?: string | number
+
+  /**
+   * A slider can be read-only and unable to change states.
+   * @default false
+   */
+  disabled?: SupportedIntrinsicInputProps['disabled']
+
+  /**
+   * A slider can take the width of its container.
+   * @default false
+   */
+  fluid?: boolean
+
+  /**
+   * Callback that creates custom accessibility message a screen reader narrates when the value changes.
+   * @param {SliderProps} props - Slider props.
+   */
+  getA11yValueMessageOnChange?: (props: SliderProps) => string
+
+  /** Shorthand for the input component. */
+  input?: ShorthandValue
+
+  /** Ref for input DOM node. */
+  inputRef?: React.Ref<HTMLElement>
+
+  /**
+   * The maximum value of the slider.
+   * @default 100
+   */
+  max?: SupportedIntrinsicInputProps['max']
+
+  /**
+   * The minimum value of the slider
+   * @default 0
+   */
+  min?: SupportedIntrinsicInputProps['min']
+
+  /**
+   * Called after item checked state is changed.
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props.
+   */
+  onChange?: ComponentEventHandler<SliderProps & { value: string }>
+
+  /**
+   * A number that specifies the granularity that the value must adhere to, or the special value 'any'.
+   * A string value of any means that no stepping is implied, and any value is allowed
+   * (barring other constraints, such as min and max).
+   * @default 1
+   */
+  step?: SupportedIntrinsicInputProps['step']
+
+  /** The value of the slider. */
+  value?: string | number
+
+  /**
+   * A slider can be displayed vertically.
+   * @default false
+   */
+  vertical?: boolean
+}
+
+export interface SliderState {
+  value: SliderProps['value']
+  isFromKeyboard: boolean
+}
+
+class Slider extends AutoControlledComponent<WithAsProp<SliderProps>, SliderState> {
+  inputRef = React.createRef<HTMLElement>()
+
+  static displayName = 'Slider'
+
+  static className = 'ui-slider'
+
+  static slotClassNames: SliderSlotClassNames
+
+  static propTypes = {
+    ...commonPropTypes.createCommon({ content: false }),
+    defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    fluid: PropTypes.bool,
+    getA11yValueMessageOnChange: PropTypes.func,
+    input: customPropTypes.itemShorthand,
+    inputRef: customPropTypes.ref,
+    max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    onChange: PropTypes.func,
+    step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    vertical: PropTypes.bool,
+  }
+
+  static defaultProps: SliderProps = {
+    accessibility: sliderBehavior,
+    getA11yValueMessageOnChange: ({ value }) => String(value),
+    max: 100,
+    min: 0,
+    step: 1,
+  }
+
+  static autoControlledProps = ['value']
+
+  getInitialAutoControlledState(): Partial<SliderState> {
+    return { value: 50 }
+  }
+
+  handleInputOverrides = () => ({
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = _.get(e, 'target.value')
+      _.invoke(this.props, 'onChange', e, { ...this.props, value })
+      this.trySetState({ value })
+    },
+    onFocus: (e: React.FocusEvent<HTMLInputElement>) => {
+      this.setState({ isFromKeyboard: isFromKeyboard() })
+      _.invoke(this.props, 'onFocus', e, this.props)
+    },
+    onMouseDown: (e: React.MouseEvent<HTMLInputElement>) => {
+      setWhatInputSource('mouse')
+      this.setState({ isFromKeyboard: false })
+      _.invoke(this.props, 'onMouseDown', e, this.props)
+    },
+  })
+
+  renderComponent({
+    ElementType,
+    classes,
+    accessibility,
+    rtl,
+    styles,
+    unhandledProps,
+  }: RenderResultConfig<SliderProps>) {
+    const { input, inputRef, step } = this.props
+    const [htmlInputProps, restProps] = partitionHTMLProps(unhandledProps)
+    const type = 'range'
+
+    const { min, max, value, valueAsPercentage } = processInputValues({
+      min: this.props.min,
+      max: this.props.max,
+      value: this.state.value || '',
+    })
+
+    // we need 2 wrappers around the slider rail, track, input and thumb slots to achieve correct component sizes
+    return (
+      <ElementType
+        className={classes.root}
+        {...accessibility.attributes.root}
+        {...restProps}
+        {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
+      >
+        <div className={cx(Slider.slotClassNames.inputWrapper, classes.inputWrapper)}>
+          <span className={cx(Slider.slotClassNames.rail, classes.rail)} />
+          <span
+            className={cx(Slider.slotClassNames.track, classes.track)}
+            style={{ width: valueAsPercentage }}
+          />
+          <Ref
+            innerRef={(inputElement: HTMLElement) => {
+              handleRef(this.inputRef, inputElement)
+              handleRef(inputRef, inputElement)
+            }}
+          >
+            {Box.create(input || type, {
+              defaultProps: {
+                ...htmlInputProps,
+                ...accessibility.attributes.input,
+                className: Slider.slotClassNames.input,
+                as: 'input',
+                min,
+                max,
+                step,
+                type,
+                value,
+                styles: styles.input,
+                ...applyAccessibilityKeyHandlers(accessibility.keyHandlers.input, htmlInputProps),
+              },
+              overrideProps: this.handleInputOverrides,
+            })}
+          </Ref>
+          {/* the thumb slot needs to appear after the input slot */}
+          <span
+            className={cx(Slider.slotClassNames.thumb, classes.thumb)}
+            style={{ [rtl ? 'right' : 'left']: valueAsPercentage }}
+          />
+        </div>
+      </ElementType>
+    )
+  }
+}
+
+Slider.slotClassNames = {
+  input: `${Slider.className}__input`,
+  inputWrapper: `${Slider.className}__input-wrapper`,
+  rail: `${Slider.className}__rail`,
+  thumb: `${Slider.className}__thumb`,
+  track: `${Slider.className}__track`,
+}
+
+/**
+ * A slider is an input that allows the user to choose a value from within a specific range of values.
+ * @accessibility
+ * Implements [ARIA Slider](https://www.w3.org/TR/wai-aria-practices-1.1/#slider) design pattern.
+ */
+export default withSafeTypeForAs<typeof Slider, SliderProps, 'input'>(Slider)
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index eb3ad25ca7..d2cb933bc1 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -139,6 +139,9 @@ export { default as RadioGroupItem } from './components/RadioGroup/RadioGroupIte
 export * from './components/Segment/Segment'
 export { default as Segment } from './components/Segment/Segment'
 
+export * from './components/Slider/Slider'
+export { default as Slider } from './components/Slider/Slider'
+
 export * from './components/Status/Status'
 export { default as Status } from './components/Status/Status'
 
diff --git a/packages/react/src/lib/accessibility/Behaviors/Slider/sliderBehavior.tsx b/packages/react/src/lib/accessibility/Behaviors/Slider/sliderBehavior.tsx
new file mode 100644
index 0000000000..7fe6b9bd8c
--- /dev/null
+++ b/packages/react/src/lib/accessibility/Behaviors/Slider/sliderBehavior.tsx
@@ -0,0 +1,27 @@
+import { Accessibility } from '../../types'
+
+const sliderBehavior: Accessibility<SliderBehaviorProps> = props => ({
+  attributes: {
+    root: {
+      'aria-disabled': props.disabled,
+    },
+    input: {
+      'aria-orientation': props.vertical ? 'vertical' : 'horizontal',
+      'aria-valuemin': props.min,
+      'aria-valuemax': props.max,
+      'aria-valuenow': props.value,
+      'aria-valuetext': props.getA11yValueMessageOnChange(props),
+    },
+  },
+})
+
+export default sliderBehavior
+
+type SliderBehaviorProps = {
+  disabled?: boolean
+  min?: number
+  max?: number
+  value?: number
+  vertical?: boolean
+  getA11yValueMessageOnChange?: (props: SliderBehaviorProps) => string
+}
diff --git a/packages/react/src/lib/accessibility/index.ts b/packages/react/src/lib/accessibility/index.ts
index 24421247fa..72a2710e6b 100644
--- a/packages/react/src/lib/accessibility/index.ts
+++ b/packages/react/src/lib/accessibility/index.ts
@@ -47,3 +47,4 @@ export { default as accordionTitleBehavior } from './Behaviors/Accordion/accordi
 export { default as accordionContentBehavior } from './Behaviors/Accordion/accordionContentBehavior'
 export { default as checkboxBehavior } from './Behaviors/Checkbox/checkboxBehavior'
 export { default as tooltipBehavior } from './Behaviors/Tooltip/tooltipBehavior'
+export { default as sliderBehavior } from './Behaviors/Slider/sliderBehavior'
diff --git a/packages/react/src/lib/htmlPropsUtils.tsx b/packages/react/src/lib/htmlPropsUtils.tsx
index b0f5e31951..bab328576c 100644
--- a/packages/react/src/lib/htmlPropsUtils.tsx
+++ b/packages/react/src/lib/htmlPropsUtils.tsx
@@ -73,6 +73,12 @@ export type HtmlInputAttrs =
   | 'type'
   | 'value'
 
+export type SupportedIntrinsicInputProps = {
+  [K in HtmlInputProps]?: K extends keyof JSX.IntrinsicElements['input']
+    ? JSX.IntrinsicElements['input'][K]
+    : any
+}
+
 export const htmlInputAttrs: HtmlInputAttrs[] = [
   // REACT
   'selected',
diff --git a/packages/react/src/themes/base/componentStyles.ts b/packages/react/src/themes/base/componentStyles.ts
index 43abaa2992..979b20c3cb 100644
--- a/packages/react/src/themes/base/componentStyles.ts
+++ b/packages/react/src/themes/base/componentStyles.ts
@@ -20,3 +20,5 @@ export { default as Toolbar } from './components/Toolbar/toolbarStyles'
 export { default as Grid } from './components/Grid/gridStyles'
 
 export { default as Image } from './components/Image/imageStyles'
+
+export { default as Slider } from './components/Slider/sliderStyles'
diff --git a/packages/react/src/themes/base/componentVariables.ts b/packages/react/src/themes/base/componentVariables.ts
index fb79451a06..08150e0ef6 100644
--- a/packages/react/src/themes/base/componentVariables.ts
+++ b/packages/react/src/themes/base/componentVariables.ts
@@ -18,3 +18,5 @@ export { default as Text } from './components/Text/textVariables'
 export { default as Grid } from './components/Grid/gridVariables'
 
 export { default as Image } from './components/Image/imageVariables'
+
+export { default as Slider } from './components/Slider/sliderVariables'
diff --git a/packages/react/src/themes/base/components/Slider/sliderStyles.ts b/packages/react/src/themes/base/components/Slider/sliderStyles.ts
new file mode 100644
index 0000000000..225c789131
--- /dev/null
+++ b/packages/react/src/themes/base/components/Slider/sliderStyles.ts
@@ -0,0 +1,105 @@
+import { SliderVariables } from './sliderVariables'
+import { SliderProps, SliderState } from '../../../../components/Slider/Slider'
+import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
+
+const selectors = {
+  WEBKIT_THUMB: '::-webkit-slider-thumb',
+  MOZ_THUMB: '::-moz-range-thumb',
+  MS_FILL_LOWER: '::-ms-fill-lower',
+  MS_FILL_UPPER: '::-ms-fill-upper',
+  MS_THUMB: '::-ms-thumb',
+}
+
+const getCommonSlotStyles = (p: SliderProps, v: SliderVariables) => ({
+  cursor: 'pointer',
+  pointerEvents: 'none',
+  position: 'absolute',
+  border: 0,
+  height: v.railHeight,
+  marginTop: `calc(${v.height} / 2 - ${v.railHeight} / 2)`,
+})
+
+const getFluidStyles = (p: SliderProps) => p.fluid && !p.vertical && { width: '100%' }
+
+const sliderStyles: ComponentSlotStylesInput<SliderProps & SliderState, SliderVariables> = {
+  root: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    height: v.height,
+
+    ...(p.disabled && { pointerEvents: 'none' }),
+    ...(p.vertical && { height: v.length, width: v.height }),
+    ...getFluidStyles(p),
+  }),
+
+  input: ({ props: p, variables: v }) => {
+    const thumbStyles = { border: 0, width: '1px' }
+
+    return {
+      '-webkit-appearance': 'none',
+      cursor: 'pointer',
+      height: '100%',
+      width: '100%',
+      margin: 0,
+      padding: 0,
+      opacity: 0,
+
+      [selectors.WEBKIT_THUMB]: { ...thumbStyles, '-webkit-appearance': 'none' },
+      [selectors.MOZ_THUMB]: thumbStyles,
+      [selectors.MS_THUMB]: { ...thumbStyles, marginTop: `calc(-${v.thumbHeight} / 2)` },
+
+      [selectors.MS_FILL_LOWER]: { display: 'none' },
+      [selectors.MS_FILL_UPPER]: { display: 'none' },
+
+      ':focus': { outline: 0 },
+      ...getFluidStyles(p),
+    }
+  },
+
+  inputWrapper: ({ props: p, variables: v }) => {
+    const transformOriginValue = `calc(${v.length} / 2)`
+
+    return {
+      position: 'relative',
+      display: 'inline-block',
+      height: v.height,
+      width: v.length,
+      ...(p.vertical && {
+        transform: 'rotate(-90deg)',
+        transformOrigin: `${transformOriginValue} ${transformOriginValue}`,
+      }),
+      ...getFluidStyles(p),
+    }
+  },
+
+  rail: ({ props: p, variables: v }) => ({
+    width: '100%',
+    background: v.railColor,
+
+    ...getCommonSlotStyles(p, v),
+    ...(p.disabled && { background: v.disabledRailColor }),
+  }),
+
+  track: ({ props: p, variables: v }) => ({
+    background: v.trackColor,
+
+    ...getCommonSlotStyles(p, v),
+    ...(p.disabled && { background: v.disabledTrackColor }),
+  }),
+
+  thumb: ({ props: p, variables: v }) => ({
+    border: 0,
+    borderRadius: '100%',
+    cursor: 'pointer',
+    pointerEvents: 'none',
+    position: 'absolute',
+
+    background: v.thumbColor,
+    height: v.thumbHeight,
+    width: v.thumbWidth,
+    marginTop: `calc(${v.height} / 2  - ${v.thumbHeight} / 2)`,
+    marginLeft: `calc(-${v.thumbWidth} / 2)`,
+
+    ...(p.disabled && { background: v.disabledThumbColor }),
+  }),
+}
+
+export default sliderStyles
diff --git a/packages/react/src/themes/base/components/Slider/sliderVariables.ts b/packages/react/src/themes/base/components/Slider/sliderVariables.ts
new file mode 100644
index 0000000000..16f9069b7d
--- /dev/null
+++ b/packages/react/src/themes/base/components/Slider/sliderVariables.ts
@@ -0,0 +1,48 @@
+import { pxToRem } from '../../../../lib'
+import { SiteVariablesPrepared } from '../../../types'
+
+export interface SliderVariables {
+  height: string
+  length: string
+
+  railColor: string
+  railHeight: string
+  disabledRailColor: string
+
+  thumbColor: string
+  activeThumbColor: string
+  disabledThumbColor: string
+  thumbHeight: string
+  activeThumbHeight: string
+  thumbBorderPadding: string
+  thumbWidth: string
+  activeThumbWidth: string
+
+  trackColor: string
+  disabledTrackColor: string
+}
+
+export default (siteVars: SiteVariablesPrepared): SliderVariables => {
+  const { colors } = siteVars
+
+  return {
+    height: pxToRem(16),
+    length: pxToRem(130),
+
+    railColor: colors.grey[300],
+    disabledRailColor: colors.grey[200],
+    railHeight: pxToRem(2),
+
+    thumbColor: colors.grey[700],
+    activeThumbColor: colors.grey[700],
+    disabledThumbColor: colors.grey[200],
+    thumbHeight: pxToRem(10),
+    activeThumbHeight: pxToRem(10),
+    thumbBorderPadding: '0',
+    thumbWidth: pxToRem(10),
+    activeThumbWidth: pxToRem(10),
+
+    trackColor: colors.grey[500],
+    disabledTrackColor: colors.grey[200],
+  }
+}
diff --git a/packages/react/src/themes/teams/componentStyles.ts b/packages/react/src/themes/teams/componentStyles.ts
index 9339384c25..757b21b6b0 100644
--- a/packages/react/src/themes/teams/componentStyles.ts
+++ b/packages/react/src/themes/teams/componentStyles.ts
@@ -62,6 +62,8 @@ export { default as RadioGroupItem } from './components/RadioGroup/radioGroupIte
 
 export { default as Segment } from './components/Segment/segmentStyles'
 
+export { default as Slider } from './components/Slider/sliderStyles'
+
 export { default as Reaction } from './components/Reaction/reactionStyles'
 export { default as ReactionGroup } from './components/Reaction/reactionGroupStyles'
 
diff --git a/packages/react/src/themes/teams/componentVariables.ts b/packages/react/src/themes/teams/componentVariables.ts
index 241f7b53b7..c4ac55fc89 100644
--- a/packages/react/src/themes/teams/componentVariables.ts
+++ b/packages/react/src/themes/teams/componentVariables.ts
@@ -61,6 +61,8 @@ export { default as ReactionGroup } from './components/Reaction/reactionGroupVar
 
 export { default as Segment } from './components/Segment/segmentVariables'
 
+export { default as Slider } from './components/Slider/sliderVariables'
+
 export { default as Status } from './components/Status/statusVariables'
 
 export { default as Text } from './components/Text/textVariables'
diff --git a/packages/react/src/themes/teams/components/Slider/sliderStyles.ts b/packages/react/src/themes/teams/components/Slider/sliderStyles.ts
new file mode 100644
index 0000000000..af1e03a2a8
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Slider/sliderStyles.ts
@@ -0,0 +1,36 @@
+import { SliderVariables } from './sliderVariables'
+import Slider, { SliderProps, SliderState } from '../../../../components/Slider/Slider'
+import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
+import getBorderFocusStyles from '../../getBorderFocusStyles'
+
+// this selector is used to identify the thumb slot from a previous sibling
+const thumbFromPreviousSiblingSelector = `&+ .${Slider.slotClassNames.thumb}`
+
+const sliderStyles: ComponentSlotStylesInput<SliderProps & SliderState, SliderVariables> = {
+  input: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => {
+    const activeThumbStyles: React.CSSProperties = {
+      height: v.activeThumbHeight,
+      width: v.activeThumbWidth,
+      background: v.activeThumbColor,
+      marginTop: `calc(${v.height} / 2  - ${v.activeThumbHeight} / 2)`,
+      marginLeft: `calc(-${v.activeThumbWidth} / 2)`,
+    }
+
+    return {
+      ':active': { [thumbFromPreviousSiblingSelector]: activeThumbStyles },
+
+      ':focus': {
+        [thumbFromPreviousSiblingSelector]: {
+          ...(p.isFromKeyboard && activeThumbStyles),
+          ...getBorderFocusStyles({
+            siteVariables,
+            isFromKeyboard: p.isFromKeyboard,
+            borderPadding: v.thumbBorderPadding,
+          })[':focus'],
+        },
+      },
+    }
+  },
+}
+
+export default sliderStyles
diff --git a/packages/react/src/themes/teams/components/Slider/sliderVariables.ts b/packages/react/src/themes/teams/components/Slider/sliderVariables.ts
new file mode 100644
index 0000000000..cdcd6f7e5b
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Slider/sliderVariables.ts
@@ -0,0 +1,30 @@
+import { pxToRem } from '../../../../lib'
+import { SiteVariablesPrepared } from '../../../types'
+import { SliderVariables as BaseSliderVariables } from '../../../base/components/Slider/sliderVariables'
+
+export type SliderVariables = Partial<BaseSliderVariables>
+
+export default (siteVars: SiteVariablesPrepared): SliderVariables => {
+  const { colorScheme } = siteVars
+
+  return {
+    height: pxToRem(16),
+    length: pxToRem(320),
+
+    railColor: colorScheme.default.border,
+    disabledRailColor: colorScheme.default.backgroundDisabled1,
+    railHeight: pxToRem(2),
+
+    thumbColor: colorScheme.default.foreground2,
+    activeThumbColor: colorScheme.default.foreground1,
+    disabledThumbColor: colorScheme.default.foregroundDisabled1,
+    thumbHeight: pxToRem(10),
+    activeThumbHeight: pxToRem(14),
+    thumbBorderPadding: pxToRem(4),
+    thumbWidth: pxToRem(10),
+    activeThumbWidth: pxToRem(14),
+
+    trackColor: colorScheme.brand.foregroundActive,
+    disabledTrackColor: colorScheme.default.foregroundDisabled1,
+  }
+}
diff --git a/packages/react/src/themes/teams/getBorderFocusStyles.ts b/packages/react/src/themes/teams/getBorderFocusStyles.ts
index 4e150eb1ee..56531b08b0 100644
--- a/packages/react/src/themes/teams/getBorderFocusStyles.ts
+++ b/packages/react/src/themes/teams/getBorderFocusStyles.ts
@@ -9,6 +9,7 @@ type BorderFocusStyles = CSSBorderStyles & {
   focusInnerBorderColor?: string
   focusOuterBorderColor?: string
   isFromKeyboard?: boolean
+  borderPadding?: React.CSSProperties['padding']
 }
 
 type BorderPseudoElementStyles = CSSBorderStyles & { borderEdgeValue: string }
@@ -44,6 +45,7 @@ const getBorderFocusStyles = (args: BorderFocusStyles): ICSSInJSStyle => {
     focusInnerBorderColor = sv.focusInnerBorderColor || defaultColor,
     focusOuterBorderColor = sv.focusOuterBorderColor || defaultColor,
     isFromKeyboard,
+    borderPadding,
   } = args
 
   const defaultBorderStyles: React.CSSProperties = { borderWidth, borderRadius }
@@ -57,13 +59,16 @@ const getBorderFocusStyles = (args: BorderFocusStyles): ICSSInJSStyle => {
             borderColor: 'transparent',
 
             ':before': getPseudoElementStyles({
-              borderEdgeValue: '0',
+              borderEdgeValue: borderPadding == null ? '0' : `-${borderPadding}`,
               borderColor: focusInnerBorderColor,
               ...defaultBorderStyles,
             }),
 
             ':after': getPseudoElementStyles({
-              borderEdgeValue: `-${borderWidth}`,
+              borderEdgeValue:
+                borderPadding == null
+                  ? `-${borderWidth}`
+                  : `calc(0px - ${borderPadding} - ${borderWidth})`,
               borderColor: focusOuterBorderColor,
               ...defaultBorderStyles,
             }),
diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts
index 2ad3014a78..65fd5118f6 100644
--- a/packages/react/src/themes/types.ts
+++ b/packages/react/src/themes/types.ts
@@ -44,6 +44,7 @@ import { RadioGroupProps } from '../components/RadioGroup/RadioGroup'
 import { ReactionGroupProps } from '../components/Reaction/ReactionGroup'
 import { ReactionProps } from '../components/Reaction/Reaction'
 import { SegmentProps } from '../components/Segment/Segment'
+import { SliderProps } from '../components/Slider/Slider'
 import { StatusProps } from '../components/Status/Status'
 import { TextProps } from '../components/Text/Text'
 import { ToolbarDividerProps } from '../components/Toolbar/ToolbarDivider'
@@ -446,6 +447,7 @@ type ThemeStylesProps = {
   Reaction?: ReactionProps
   ReactionGroup?: ReactionGroupProps
   Segment?: SegmentProps
+  Slider?: SliderProps
   Status?: StatusProps
   Toolbar?: ToolbarProps
   ToolbarItem?: ToolbarItemProps
diff --git a/packages/react/test/specs/behaviors/behavior-test.tsx b/packages/react/test/specs/behaviors/behavior-test.tsx
index 09e1e6ae1e..2d54fc3512 100644
--- a/packages/react/test/specs/behaviors/behavior-test.tsx
+++ b/packages/react/test/specs/behaviors/behavior-test.tsx
@@ -25,6 +25,7 @@ import {
   radioGroupItemBehavior,
   selectableListBehavior,
   selectableListItemBehavior,
+  sliderBehavior,
   tabBehavior,
   tabListBehavior,
   toggleButtonBehavior,
@@ -75,6 +76,7 @@ testHelper.addBehavior('radioGroupBehavior', radioGroupBehavior)
 testHelper.addBehavior('radioGroupItemBehavior', radioGroupItemBehavior)
 testHelper.addBehavior('selectableListBehavior', selectableListBehavior)
 testHelper.addBehavior('selectableListItemBehavior', selectableListItemBehavior)
+testHelper.addBehavior('sliderBehavior', sliderBehavior)
 testHelper.addBehavior('tabBehavior', tabBehavior)
 testHelper.addBehavior('tabListBehavior', tabListBehavior)
 testHelper.addBehavior('menuAsToolbarBehavior', menuAsToolbarBehavior)
diff --git a/packages/react/test/specs/components/Slider/Slider-test.tsx b/packages/react/test/specs/components/Slider/Slider-test.tsx
new file mode 100644
index 0000000000..bca048b45c
--- /dev/null
+++ b/packages/react/test/specs/components/Slider/Slider-test.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { ReactWrapper } from 'enzyme'
+
+import { mountWithProvider as mount } from 'test/utils'
+import { isConformant, handlesAccessibility } from 'test/specs/commonTests'
+import Slider from 'src/components/Slider/Slider'
+
+const getInputDomNode = (sliderComp: ReactWrapper): HTMLInputElement =>
+  sliderComp.find('input').getDOMNode() as HTMLInputElement
+
+const setUserInputValue = (sliderComp: ReactWrapper, value: string) => {
+  sliderComp.find('input').simulate('change', { target: { value } })
+}
+
+describe('Slider', () => {
+  isConformant(Slider, {
+    eventTargets: {
+      onChange: 'input',
+      onKeyDown: 'input',
+      onKeyPress: 'input',
+      onKeyUp: 'input',
+    },
+  })
+
+  describe('auto-controlled', () => {
+    it('sets slider value from user when the value prop is not set (non-controlled mode)', () => {
+      const sliderComp = mount(<Slider />)
+      const domNode = getInputDomNode(sliderComp)
+      setUserInputValue(sliderComp, '30')
+
+      expect(domNode.value).toEqual('30')
+    })
+
+    it('cannot set input value from user when the value prop is already set (controlled mode)', () => {
+      const sliderComp = mount(<Slider value={'80'} />)
+      const domNode = getInputDomNode(sliderComp)
+      setUserInputValue(sliderComp, '30')
+
+      expect(domNode.value).toEqual('80')
+    })
+  })
+
+  describe('accessibility', () => {
+    handlesAccessibility(Slider, { partSelector: 'input' })
+  })
+})