Volume slider

src/js/components/Player.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 
 import FontAwesome from 'react-fontawesome'
+import VolumeSlider from './VolumeSlider'
 import * as actions from '../services/mopidy/actions'
 
 class Player extends React.Component{
@@ -46,7 +47,9 @@ class Player extends React.Component{
 				{ consumeButton }
 				{ randomButton }
 				{ repeatButton }
-				{ this.props.mopidy.volume }
+				<VolumeSlider
+					volume={ this.props.mopidy.volume } 
+					onChange={(volume) => this.props.actions.instruct('playback.setVolume', { volume: volume })} />
 			</div>
 		);
 	}

src/js/components/VolumeSlider.js

@@ -0,0 +1,25 @@
+
+import React, { PropTypes } from 'react'
+import FontAwesome from 'react-fontawesome'
+
+export default class VolumeSlider extends React.Component{
+
+	constructor(props) {
+		super(props);
+	}
+
+	handleChange(e){
+		this.props.onChange( parseInt(e.target.value) )
+	}
+
+	render(){
+		return (
+			<input
+				type="range"
+				value={this.props.volume}
+				min="0"
+				max="100"
+				onChange={ (e) => this.handleChange(e) } />
+		);
+	}
+}