fix(slider): fix Slider origin and decimal issues

closes #124

Author: arturbien

src/components/Slider/Slider.js

@@ -284,7 +284,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
 
   const marks =
     marksProp === true && step !== null
-      ? [...Array(Math.floor((max - min) / step) + 1)].map((_, index) => ({
+      ? [...Array(Math.round((max - min) / step) + 1)].map((_, index) => ({
           value: min + step * index
         }))
       : marksProp || [];
@@ -497,7 +497,8 @@ const Slider = React.forwardRef(function Slider(props, ref) {
             isDisabled={disabled}
             vertical={vertical}
             style={{
-              [vertical ? 'bottom' : 'left']: `${(m.value / (max - min)) *
+              [vertical ? 'bottom' : 'left']: `${((m.value - min) /
+                (max - min)) *
                 100}%`
             }}
             key={(m.value / (max - min)) * 100}
@@ -516,7 +517,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
         id='swag'
         style={{
           [vertical ? 'bottom' : 'left']: `${(vertical ? -100 : 0) +
-            (100 * valueDerived) / (max - min)}%`
+            (100 * (valueDerived - min)) / (max - min)}%`
         }}
         tabIndex={disabled ? null : 0}
         vertical={vertical}

src/components/Slider/Slider.spec.js

@@ -194,16 +194,18 @@ describe('<Slider />', () => {
 
     it('should use min as the step origin', () => {
       const { getByRole } = renderWithTheme(
-        <Slider defaultValue={150} step={100} max={750} min={150} />
+        <Slider defaultValue={4} step={2} max={12} min={2} />
       );
       const thumb = getByRole('slider');
       thumb.focus();
 
       fireEvent.keyDown(document.activeElement, moveRightEvent);
-      expect(thumb).toHaveAttribute('aria-valuenow', '250');
+      expect(thumb).toHaveAttribute('aria-valuenow', '6');
 
       fireEvent.keyDown(document.activeElement, moveLeftEvent);
-      expect(thumb).toHaveAttribute('aria-valuenow', '150');
+      expect(thumb).toHaveAttribute('aria-valuenow', '4');
+
+      expect(thumb.style.left).toBe('20%');
     });
 
     it('should reach right edge value', () => {

src/components/Slider/Slider.stories.js

@@ -46,17 +46,26 @@ storiesOf('Slider', module)
   .add('restricted values', () => (
     <Slider
       size='300px'
-      min={0}
+      min={1.35}
       max={6}
       step={null}
-      defaultValue={0}
       marks={[
-        { value: 0, label: '0°C' },
         { value: 1.35, label: '1.35°C' },
+        { value: 2.75, label: '2.75°C' },
         { value: 6, label: '6°C' }
       ]}
     />
   ))
+  .add('decimal values', () => (
+    <Slider
+      size='300px'
+      min={0.8}
+      max={1.2}
+      defaultValue={1}
+      step={0.1}
+      marks
+    />
+  ))
   .add('disabled', () => (
     <Slider
       disabled