Use larger steps for sliders on smaller screens (#12)

rix1 · Apr 26, 2020 · bd254f3 · bd254f3 · vercel · Apr 26, 2020
1 parent 8a533ad
commit bd254f3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/src/components/ProfileSlider.js b/src/components/ProfileSlider.js
@@ -47,6 +47,8 @@ class ProfileSlider extends PureComponent<Props, State> {
 
   render() {
     const { strengthValue, tasteValue, valuesAdjusted } = this.state;
+    const stepSize =
+      typeof window !== 'undefined' && window.innerWidth < 768 ? 5 : 1;
 
     const separators = stengthToSegments(strengthValue);
 
@@ -89,6 +91,7 @@ class ProfileSlider extends PureComponent<Props, State> {
           <Range
             min={10}
             max={90}
+            step={stepSize}
             className="w-40"
             onChange={this.onChange('tasteValue')}
             value={tasteValue}
@@ -106,6 +109,7 @@ class ProfileSlider extends PureComponent<Props, State> {
           <Range
             min={10}
             max={90}
+            step={stepSize}
             className="w-60"
             onChange={this.onChange('strengthValue')}
             value={strengthValue}

diff --git a/src/components/Range/StyledRange.js b/src/components/Range/StyledRange.js
@@ -10,6 +10,7 @@ type StyledRangeProps = {|
   value: number,
   max: number | string,
   min: number | string,
+  step: number,
   onChange: (SyntheticInputEvent<HTMLInputElement>) => void,
   onBlur: (SyntheticFocusEvent<HTMLInputElement>) => void,
 |};
@@ -68,6 +69,7 @@ const StyledRange = ({
 StyledRange.defaultProps = {
   max: 100,
   min: 0,
+  step: 1,
   sliderIcons: ['😳'],
   idleSlider: '😴',
   hasChanged: false,