New slider

app/components/flow/PollVoting.js

@@ -147,30 +147,77 @@ class BallotSlider extends Component {
       this.setState({value: prevProps.votes || 0})
   }
 
+  /*
   handleChange = (event, value) => {
     if(value > this.props.maxVotesAvailable){
       value = this.props.maxVotesAvailable;
     }
     this.setState({value});
     this.props.updateVotes(value);
-  };
+  };*/
+
+  increaseVotes = (event) => {
+    let value = this.state.value;
+    if(value + 1 > this.props.maxVotesAvailable){
+      value = this.props.maxVotesAvailable;
+    }
+
+    value++;
+    this.setState({value});
+    this.props.updateVotes(value);
+  }
+
+  reduceVotes = (event) => {
+    let value = this.state.value;
+    if(value - 1 < 0){
+      value = 0;
+    }
+
+    value--;
+    this.setState({value});
+    this.props.updateVotes(value);
+  }
 
   render(){
     const {maxVotes, maxVotesAvailable, classes, cantVote, balance, symbol, title, subtitle} = this.props;
     const {value} = this.state;
     const nextVote = value + 1;
 
+    const toBN = web3.utils.toBN;
+    let percentage = Math.round(value * value * 100 / balance);
+    percentage = percentage > 100 ? 100 : percentage;  
+
     return <Card className="card">
               <CardContent>
                 <Typography gutterBottom component="h2">{title}</Typography>
                 <Typography component="p">{subtitle}</Typography>
-                <Slider disabled={cantVote} classes={{ thumb: classes.thumb }} style={{ width: '95%' }} value={value} min={0} max={maxVotes} step={1}  onChange={this.handleChange} />
-                {balance > 0 && !cantVote && <b>Your votes: {value} ({value * value} {symbol})</b>}
-                { nextVote <= maxVotesAvailable && !cantVote ? <small>- Additional vote will cost {nextVote*nextVote - value*value} {symbol}</small> : (balance > 0 && !cantVote && <small>- Not enough balance available to buy additional votes</small>) }
-              </CardContent>
-          </Card>
+                <div className="customSlider">
+                  <div className="nav1">
+                    <button onMouseDown={this.reduceVotes} disabled={percentage == 0 || cantVote || value == 0}><img src="images/slider-minus.svg" /></button>
+                  </div>
+                  <div className="nav2">
+                    <button onMouseDown={this.increaseVotes} disabled={percentage == 100 || cantVote || nextVote > maxVotesAvailable}><img src="images/slider-plus.svg" /></button>
+                  </div>
+                  <div className="content">
+                    <div className="progress progress-large">
+                      <span style={{width: percentage +'%'}}>
+                        <Typography gutterBottom component="h2"><span>{value} votes <br /><small>{value*value} Credits</small></span></Typography>
+                      </span>
+                    </div>
+                  </div>
+                  <div className="clear"></div>
+              </div>
+            </CardContent>
+          </Card>;
   }
 }
 
 
+// <Slider disabled={cantVote} classes={{ thumb: classes.thumb }} style={{ width: '95%' }} value={value} min={0} max={maxVotes} step={1}  onChange={this.handleChange} />
+// {balance > 0 && !cantVote && <b>Your votes: {value} ({value * value} {symbol})</b>}
+// { nextVote <= maxVotesAvailable && !cantVote ? <small>- Additional vote will cost {nextVote*nextVote - value*value} {symbol}</small> : (balance > 0 && !cantVote && <small>- Not enough balance available to buy additional votes</small>) }
+              
+            
+              
+
 export default withRouter(withStyles(styles)(PollVoting));

app/css/styles.css

@@ -403,4 +403,67 @@ button[disabled]{
     padding: 5px 0 5px 20px;
     border-radius: 8px;
     white-space: nowrap;
-  }
+  }
+
+
+.customSlider {
+    height: 52px;
+}
+
+.customSlider .nav1    { 
+    width:50px; 
+    float:left; 
+    height: 52px;
+}
+
+.customSlider div button {
+    border: none;
+    background: #ECEFFC;
+}
+
+.customSlider .nav1 button {
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+}
+
+.customSlider .nav2 button {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+}
+
+.customSlider .nav2    { width:50px; float:right; }
+
+.customSlider .content { 
+    margin:0 50px; 
+}
+
+.customSlider .content .progress {
+    background: #ECEFFC;
+    height: 54px;
+}
+
+.customSlider .content .progress > span {
+    background: rgba(67, 96, 223, 0.15);
+    height: 52px;
+    border-radius: 0;
+    padding: 0;
+    margin: 0;
+    max-width: 100% !important;
+    min-width: 0;
+}
+
+.customSlider .content .progress  > span {
+    text-align: center;
+}
+
+.customSlider .content .progress span span {
+    position: relative;
+    top: 5px;
+}
+
+.customSlider .content .progress span span small {
+    color: #666666;
+    font-weight: normal;
+}
+
+.customSlider .clear   { clear:both; }

app/images/slider-minus.svg

@@ -0,0 +1,4 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="26" cy="26" r="12" fill="#4360DF"/>
+<rect x="20" y="25" width="12" height="2" rx="1" fill="white"/>
+</svg>

app/images/slider-plus.svg

@@ -0,0 +1,5 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="26" cy="26" r="12" fill="#4360DF"/>
+<rect x="20" y="25" width="12" height="2" rx="1" fill="white"/>
+<rect x="25" y="32" width="12" height="2" rx="1" transform="rotate(-90 25 32)" fill="white"/>
+</svg>