Added Slider component for input range

• Added:
- Slider component for input range

app/javascript/gabsocial/components/modal/display_options_modal.js

@@ -13,13 +13,14 @@ import {
 import ModalLayout from './modal_layout'
 import Button from '../button'
 import Text from '../text'
+import Slider from '../slider'
 import SettingSwitch from '../setting_switch'
 
 class DisplayOptionsModal extends ImmutablePureComponent {
 
-  handleOnFontSizeChange = (e) => {
+  handleOnFontSizeChange = (value) => {
     const fontSizeNames = Object.keys(FONT_SIZES)
-    const index = fontSizeNames[e.target.value]
+    const index = fontSizeNames[value]
 
     this.props.onChange('fontSize', index)
   }
@@ -66,8 +67,7 @@ class DisplayOptionsModal extends ImmutablePureComponent {
               <span className={[_s.d, _s.text, _s.cPrimary].join(' ')} style={{fontSize: '12px'}}>
                 Aa
               </span>
-              <input
+              <Slider
-                type='range'
                 min='0'
                 value={currentFontSizeIndex}
                 max={fontSizeNames.length - 1}

app/javascript/gabsocial/components/slider.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+class Slider extends React.PureComponent {
+
+  handleOnInput = (e) => {
+    this.props.onInput(e.target.value)
+  }
+  
+  handleOnChange = (e) => {
+    this.props.onChange(e.target.value)
+  }
+
+  render() {
+    const {
+      className,
+      min,
+      max,
+      value,
+    } = this.props
+
+    return (
+      <input
+        type='range'
+        min={min}
+        value={value}
+        max={max}
+        onInput={this.handleOnInput}
+        onChange={this.handleOnChange}
+        className={className}
+      />
+    )
+  }
+
+}
+
+Slider.propTypes = {
+  className: PropTypes.string,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  onChange: PropTypes.func,
+  onInput: PropTypes.func,
+  value: PropTypes.number,
+}
+
+export default Slider