feat: text input for sliders (WIP)

src/components/modals/main/scss/settings/_main.scss

@@ -115,7 +115,6 @@ ul {
 .PrivateSwitchBase-input-4,
 .MuiRadio-root,
 .aboutLink,
-.MuiIconButton-root,
 legend {
   color: var(--modal-text) !important;
 }
@@ -177,3 +176,11 @@ legend {
     }
   }
 }
+
+.sliderText {
+  background: none !important;
+  max-width: 30px;
+  padding: 0px 0px !important;
+  border-radius: 0;
+  font-size: 1rem;
+}

src/components/modals/main/settings/Slider.jsx

@@ -14,7 +14,15 @@ export default class Slider extends React.PureComponent {
   }
 
   handleChange = (e) => {
-    const { value } = e.target;
+    let { value } = e.target;
+
+    if (value > this.props.max) {
+      value = this.props.max;
+    }
+
+    if (value < this.props.min) {
+      value = this.props.min;
+    }
   
     localStorage.setItem(this.props.name, value);
     this.setState({
@@ -35,9 +43,11 @@ export default class Slider extends React.PureComponent {
   }
 
   render() {
+    const text = <input className='sliderText' type='text' onChange={this.handleChange} value={this.state.value}/>;
+
     return (
       <>
-        <p>{this.props.title} ({this.state.value}{this.props.display}) <span className='modalLink' onClick={this.resetItem}>{this.language.buttons.reset}</span></p>
+        <p>{this.props.title} ({text}{this.props.display}) <span className='modalLink' onClick={this.resetItem}>{this.language.buttons.reset}</span></p>
         <input className='range' type='range' min={this.props.min} max={this.props.max} step={this.props.step || 1} value={this.state.value} onChange={this.handleChange} />
       </>
     );

src/components/modals/main/settings/sections/background/Background.jsx

@@ -162,7 +162,7 @@ export default class BackgroundSettings extends React.PureComponent {
 
         <h3>{background.effects.title}</h3>
         <Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' category='background' />
-        <Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='100' display='%' category='background' />
+        <Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='90' display='%' category='background' />
         <br/><br/>
       </>
     );