Added Slider component

packages/docs/src/App.js

@@ -221,6 +221,7 @@ const ComponentNav = () => {
           { title: 'Link', path: 'Link' },
           { title: 'Select', path: 'Select' },
           { title: 'Skeleton', path: 'Skeleton' },
+          { title: 'Slider', path: 'Slider' },
           { title: 'Spinner', path: 'Spinner' },
           { title: 'Switch', path: 'Switch' },
           { title: 'Text', path: 'Text' },

packages/docs/src/pages/components/index.js

@@ -23,7 +23,8 @@ import {
   Form,
   Paragraph,
   Tabs,
-  Tooltip
+  Tooltip,
+  Slider
 } from 'react-ui'
 import { Page, Example, Section, Paragraph as Para } from '../../components'
 import { Link as RouterLink } from '@reach/router'
@@ -172,6 +173,9 @@ const Documentation = () => {
             <Skeleton width={120} />
           </Stack>
         </ComponentCard>
+        <ComponentCard name="Slider">
+          <Slider min="1" max="10" defaultValue="2" />
+        </ComponentCard>
         <ComponentCard name="Spinner" gap={4}>
           <Spinner size="small" />
           <Spinner size="medium" />

packages/docs/src/pages/components/slider.js

@@ -0,0 +1,117 @@
+import React from 'react'
+import { ThemeProvider, Switch, Slider,Link, Text } from 'react-ui'
+import { Page, Props, Example, Section, Table, Para } from '../../components'
+
+const Documentation = () => {
+  return (
+    <Page
+      title="Slider"
+      tagline="Use Slider to request a range of information from the user"
+    >
+      <Example>
+        <Example.Preview>
+          <Slider min="1" max="10" defaultValue="2" />
+        </Example.Preview>
+        <Example.Code>
+          {`
+            <Slider min="1" max="10" defaultValue="2" />
+          `}
+        </Example.Code>
+      </Example>
+
+      <Section title="Props">
+        <Props
+          props={[
+            {
+              name: '+',
+              type: 'props of Input "range"',
+              description: ''
+            }
+          ]}
+        />
+      </Section>
+
+      <Section title="Examples">
+        <Para>
+          Slider can be used with{' '}
+          <Link href="/components/Form">Form.Field</Link> which adds accessible
+          labels and error states.
+        </Para>
+
+        <Example>
+          <Example.Preview direction="vertical" gap={3}>
+            <Slider min="1" max="10" defaultValue="2" />
+            <Slider min="1" max="10" disabled />
+          </Example.Preview>
+          <Example.Code>{`
+            <Slider min="1" max="10" defaultValue="2" />
+            <Slider min="1" max="10" disabled />
+          `}</Example.Code>
+        </Example>
+      </Section>
+
+      <Section title="Customisation">
+        <Para>
+          <Text variant="subtle" css={{ fontStyle: 'italic' }}>
+            Please read the docs on{' '}
+            <Link href="/core-concepts/customising-components">
+              customising components
+            </Link>{' '}
+            first.
+          </Text>
+        </Para>
+
+        <Para>Slider uses the following theme keys:</Para>
+
+        <Table>
+          <Table.Header>
+            <Table.Column span={4}>Property</Table.Column>
+            <Table.Column span={8}>Theme key</Table.Column>
+          </Table.Header>
+          <Table.Row>
+            <Table.Column span={4}>backgroundColor</Table.Column>
+            <Table.Column span={8}>
+              colors.Slider.backgroundTrack, colors.Slider.backgroundThumb
+            </Table.Column>
+          </Table.Row>
+        </Table>
+
+        <Example>
+          <Example.Code lang="js">{`
+          import { tokens, components } from 'react-ui/themes/base'
+
+          components.Slider = {
+            colors: {
+              backgroundTrack: '#F4CA64',
+              backgroundThumb: '#2368A2'
+            }
+          }
+        `}</Example.Code>
+          <Example.Code lang="jsx">{`
+          <ThemeProvider tokens={tokens} components={components}>
+            <Slider min="1" max="10" />
+            <Slider min="1" max="10" defaultValue={3} />
+          </ThemeProvider>
+        `}</Example.Code>
+          <Example.Preview direction="vertical" gap={2}>
+            <ThemeProvider
+              components={{
+                Slider: {
+                  colors: {
+                    backgroundTrack: '#F4CA64',
+                    backgroundThumb: '#2368A2'
+                  }
+                }
+              }}
+            >
+              <Slider min="1" max="10" />
+              <Slider min="1" max="10" defaultValue={3} />
+            </ThemeProvider>
+          </Example.Preview>
+        </Example>
+      </Section>
+    </Page>
+  )
+}
+
+export default Documentation

packages/docs/src/pages/index.js

@@ -12,6 +12,7 @@ export { default as Spinner } from './components/spinner'
 export { default as Switch } from './components/switch'
 export { default as Text } from './components/text'
 export { default as Textarea } from './components/textarea'
+export { default as Slider } from './components/slider'
 
 export { default as ThemeProvider } from './components/theme-provider'
 

packages/react-ui/index.js

@@ -13,6 +13,7 @@ export * from './src/components/spinner'
 export * from './src/components/switch'
 export * from './src/components/text'
 export * from './src/components/textarea'
+export * from './src/components/slider'
 
 export * from './src/components/grid'
 export * from './src/components/stack'

packages/react-ui/package.json

@@ -34,7 +34,7 @@
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.7.4",
+    "@babel/preset-env": "^7.11.5",
     "@babel/preset-react": "^7.7.4",
     "@ds-tools/storybook": "0.0.1",
     "bundlesize2": "^0.0.24",

packages/react-ui/src/components/slider/index.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Input } from '../input'
+import { styles } from './slider.styles'
+import { merge } from '../../utils'
+
+export const Slider = React.forwardRef(function Slider(
+  { size, css, ...props },
+  ref
+) {
+
+  return (
+    <Input
+      ref={ref}
+      as="input"
+      type="range"
+      component="Slider"
+      css={merge(styles.Slider, css)}
+      {...props}
+    />
+  )
+})
+
+Slider.propTypes = {}
+
+Slider.defaultProps = {}

packages/react-ui/src/components/slider/slider.styles.js

@@ -0,0 +1,19 @@
+export const styles = {
+    Slider: {
+      appearance: "none",
+      border: 'none',
+      backgroundColor:'Slider.backgroundTrack',
+      borderRadius: 1,
+      outline: 'none',
+      height: 2,
+      cursor:  'pointer',
+      '::-webkit-slider-thumb':{
+        cursor:  'inherit',
+        '-webkit-appearance': 'none',
+        backgroundColor: 'Slider.backgroundThumb',
+        height: 4,
+        width:  4,
+        borderRadius: '100%',
+      }
+    }
+  }

packages/react-ui/src/themes/base.js

@@ -340,6 +340,12 @@ const components = {
     paddingY: 1,
     fontSize: 2,
     lineHeight: 1
+  },
+  Slider: {
+    colors: {
+      backgroundTrack: 'grey',
+      backgroundThumb: 'green'
+    },
   }
 }
 

packages/react-ui/src/themes/dark.js

@@ -570,6 +570,12 @@ const components = {
     paddingY: 1,
     fontSize: 2,
     lineHeight: 1
+  },
+  Slider: {
+    colors: {
+      backgroundTrack: 'grays.800',
+      backgroundThumb: 'greens.600'
+    },
   }
 }
 

packages/react-ui/src/themes/light.js

@@ -568,6 +568,12 @@ const components = {
     paddingY: 1,
     fontSize: 2,
     lineHeight: 1
+  },
+  Slider: {
+    colors: {
+      backgroundTrack: 'grays.400',
+      backgroundThumb: 'greens.700'
+    },
   }
 }