1 files changed, 55 insertions, 11 deletions

diff --git a/app/client/common/slider.component.js b/app/client/common/slider.component.js
index 8932fbd..c8b4ed1 100644
--- a/app/client/common/slider.component.js
+++ b/app/client/common/slider.component.js
@@ -1,29 +1,72 @@
 import { h, Component } from 'preact'
 import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import * as liveActions from '../live/actions'
+
+const SLIDER_THROTTLE_TIME = 100
 
 class Slider extends Component {
+  constructor(props){
+    super(props)
+    this.timeout = 0
+    this.state = {
+      value: props.opt[props.name]
+    }
+    this.handleInput = this.handleInput.bind(this)
+    this.handleRange = this.handleRange.bind(this)
+  }
+
+  handleInput(e){
+    let { name, opt } = this.props
+    let old_value = opt[name]
+    let new_value = e.target.value
+    if (this.props.type === 'int') {
+      new_value = parseInt(new_value)
+    }
+    if (old_value !== new_value) {
+      this.setState({ value: new_value })
+      this.props.actions.set_param(this.props.name, new_value)
+    }
+    clearTimeout(this.timeout)
+  }
+  handleRange(e){
+    clearTimeout(this.timeout)
+    let new_value = e.target.value
+    if (this.props.type === 'int') {
+      new_value = parseInt(new_value)
+    }
+    this.setState({ value: new_value })
+    this.timeout = setTimeout(() => {
+      this.props.actions.set_param(this.props.name, new_value)
+    }, SLIDER_THROTTLE_TIME)
+  }
   render(){
-    const props = this.props
-    const name = props.name
-    const title = props.title || name.replace(/_/g, ' ')
+    let { name, title } = this.props
+    let value = this.state.value
+    if (typeof value === 'undefined') {
+      value = this.props.min
+    }
+    let text_value = value
     let step;
-    if (props.type === 'int') {
+    if (this.props.type === 'int') {
       step = 1
     } else {
-      step = (props.max - props.min) / 100
+      step = (this.props.max - this.props.min) / 100
+      text_value = parseFloat(value).toFixed(2)
     }
     return (
       <div class='slider'>
         <label>
-          <span>{title}</span>
-          <input type='text'
-          />
+          <span>{title || name.replace(/_/g, ' ')}</span>
+          <input type='text' value={text_value} onBlur={this.handleInput} />
         </label>
         <input
           type='range'
-          min={props.min}
-          max={props.max}
+          min={this.props.min}
+          max={this.props.max}
           step={step}
+          value={value}
+          onInput={this.handleRange}
         />
       </div>
     )
@@ -31,10 +74,11 @@ class Slider extends Component {
 }
 
 const mapStateToProps = state => ({
+  opt: state.live.opt,
 })
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
-  ...ownProps,
+  actions: bindActionCreators(liveActions, dispatch)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Slider)