Add slider for strategy-type 'percentage'

frontend/src/component/feature/form/strategy-configure.jsx

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import { Textfield, Button, Card, CardTitle, CardText, CardActions, CardMenu, IconButton }  from 'react-mdl';
 import { Link } from 'react-router';
+import StrategyInputPersentage from './strategy-input-persentage';
 
 const style = {
     flex: '1',
@@ -39,7 +40,14 @@ class StrategyConfigure extends React.Component {
             if (keys.length === 0) {
                 return null;
             }
-            return keys.map(field => (
+            return keys.map(field => {
+                if (strategyDefinition.parametersTemplate[field] === 'percentage') {
+                    return (<StrategyInputPersentage
+                        field={field}
+                        onChange={this.handleConfigChange.bind(this, field)}
+                        value={this.props.strategy.parameters[field]} />);
+                } else {
+                    return (
                         <Textfield
                             floatingLabel
                             rows={2}
@@ -50,7 +58,9 @@ class StrategyConfigure extends React.Component {
                             onChange={this.handleConfigChange.bind(this, field)}
                             value={this.props.strategy.parameters[field]}
                         />
-            ));
+                    );
+                }
+            });
         }
         return null;
     }

frontend/src/component/feature/form/strategy-input-persentage.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Slider }  from 'react-mdl';
+
+const labelStyle = {
+    margin: '0',
+    color: '#3f51b5',
+    fontSize: '12px',
+};
+
+export default ({ field, value, onChange }) => (
+    <div>
+        <label style={labelStyle}>{field}: {value}%</label>
+        <Slider min={0} max={100} defaultValue={value} value={value} onChange={onChange} label={field} />
+    </div>
+);