r-range-slider

r-range-slider is a range slider created by reactjs.

• Unlimit Styling.
• Single point , double points and multi points support.
• Change points in wonderfull ways.
• Mobile Support(good for using in mobile browsers ,phonegap ,cordova or other hybrid frameworks).
• Responsive.
• right , left ,top ,botton direction support.

Usage

npm install r-range-slider

load

import Slider from "r-range-slider";

import React from 'react';

props list

Prop | Description | Type | Default ---- | ----------- | ---- | ------- start | Start of slider range | number | 0 end | End of slider range | number | 100 step | Step of change slider | number | 1 min | Set Minimum amount allowed | number | optional max | Set Maximum amount allowed | number | optional onChange|function that get points(array) and dragging(boolean) as parameters|function|required points | Slider Points value | array of numbers| [0] fillStyle | get fill index as parameter and should returns fill css object | function | optional pointStyle | get point index as parameter and should returns point css object | function | optional valueStyle | returns css object for value of points | function | optional lineStyle | returns css object for slider line | function | optional showValue | Makes the point value appear on the point.if false , never show value, if true alwais show value and if not set , show when mouse down on points |boolean or undefined editValue | get point popover value as parameter and returns edited value to show on point |function labelStep | show labels based on labelStep from start to end | number | optional editLabel | get value of label as parameter and returns edited label based on value | function | optional labelStyle | get value of label as parameter and returns css object of label | function | optional onLabelClick | callback when click on label. get value of label as parameter | function | optional scaleStep | scaling slider based on scaleStep from start to end | number | optional scaleStyle | get value of scale as parameter and returns css object of scale | function | optional direction | Set direction of slider("left","right","top","bottom")|string|"right" attrs | send html attributes as object to slider (className,id,style,onClick,...) | object | optional

• points

single point:

<Slider points={[20]} start={0} end={100}/>

2 points:

<Slider points={[20,60]} start={0} end={100}/>

multi points:

<Slider points={[20,60,80,100]} start={0} end={100}/>

• onChange

export default class App extends Component {
  state = {value:30,draggingValue:'value is 30',finalValue:'value is 30'};
  render() {
    let {value,draggingValue,finalValue} = this.state;
    return (
      <>
        <Slider
          start={0}
          end={100}
          points={[value]}
          onChange={(points,dragging)=>{
            if(dragging){
              this.setState({
                value:points[0],
                draggingValue:`value is ${points[0]}`
              });
            }
            else{
              this.setState({
                value:points[0],
                finalValue:`value is ${points[0]}`
              });
            }

          }}
        />
        <span>{draggingValue}</span>
        <br/>
        <span>{finalValue}</span>
      </> 
    );
  }
}

• step

class App extends Component {
  state = {value:30};
  render() {
    let {value} = this.state;
    return (
      <Slider
        start={0}
        end={100}
        step={5}
        points={[value]}
        onChange={(points)=>this.setState({value:points[0]})}
      /> 
    );
  }
}

• min , max

class App extends Component {
  state = {value:50};
  render() {
    let {value} = this.state;
    return ( 
      <Slider
        start={0}
        end={100}
        min={30}
        max={80}
        points={[value]}
        onChange={(points)=>this.setState({value:points[0]})}
      /> 
    );
  }
}

• showValue(props):

showValue as undefined:

if you not set showValue, value of points will be visible when you mousedown on points.

<Slider />

showValue as true:

if you set showValue={true}, value of points alwais will be visible.

<Slider 
   showValue={true}
/>

showValue as false:

if you set showValue={false}, value of points alwais will be invisible.

<Slider 
   showValue={false}
/>

• direction:

class App extends Component {
  state = {value:50};
  render() {
    let {value} = this.state;
    return (  
      <Slider
        start={0}
        end={100}
        points={[value]}
        onChange={(points)=>this.setState({value:points[0]})}
        direction='left'
      /> 
    );
  }
}

• valueStyle(props):

<Slider 
   attrs={{className:'my-slider'}}
   points={[30]}
   showValue={true}
   valueStyle={()=>{
     return {
        background:'orange',
        fontSize:16,
        top:-30
     }
   }}
/>

or styling by css:

.my-slider .r-range-slider-value{
   background:orange;
   fontSize:16px;
   top:-30px;
}

other example:

class App extends Component {
  state = {value:50};
  render() {
    let {value} = this.state;
    return (  
      <Slider
        start={0}
        end={100}
        points={[value]}
        onChange={(points)=>this.setState({value:points[0]})}
        showValue={true}
        valueStyle={()=>{
          return {
            background:'#ccc',
            width:36,
            top:-22,
            height:36,
            padding:0,
            border:'2px solid #ddd',
            borderRadius:'100%',
            display:'flex',
            alignItems:'center',
            justifyContent:'center'
          }
        }}
      /> 
    );
  }
}

or styling by css:

.my-slider .r-range-slider-value{
  background:#ccc;
  width:36px;
  height:36px;
  top:-22px;
  padding:0;
  border:2px solid #ddd;
  border-radius:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

• editValue(function):

class App extends Component {
  state = {value:50};
  render() {
    let {value} = this.state;
    return (  
      <Slider
        start={0}
        end={100}
        points={[value]}
        onChange={(points)=>this.setState({value:points[0]})}
        showValue={true}
        editValue={(value)=>value + '%'}
      /> 
    );
  }
}

• fillStyle(props):

<Slider 
      attrs={{className:'my-slider'}}
      points={[20]} 
      start={0} 
      end={100}
      fillStyle={()=>{
            return {background:'dodgerblue'}
      }}
/>

or styling by css:

.my-slider .r-range-slider-fill{
   background:dodgerblue;
}

other example:

<Slider 
   attrs={{className:'my-slider'}}
   points={[20]} 
   start={0} 
   end={100}
   fillStyle={(index)=>{
      if(index === 0){
         return {background:'dodgerblue'}
      }
   }}
/>

or styling by css:

.my-slider .r-range-slider-fill[data-index=1]{
   background:dodgerblue;
}

other example:

<Slider 
      attrs={{className:'my-slider'}}
      start={0} 
      end={100}
      points={[20,50]}
      fillStyle={(index)=>{
            if(index === 1){
                  return {background:'dodgerblue'}
            }
      }}
/>

or styling by css:

.my-slider .r-range-slider-fill[data-index=1]{
   background:dodgerblue;
}

• pointStyle (function)

<Slider 
   attrs={{className:'my-slider'}}
   start={0} 
   end={100}
   points={[20,60]}
   pointStyle={(index)=>{
      if(index === 0){
         return {background:'orange',borderRadius:0}
      }
      else {
         return {background:'pink'}
      }
   }}
/>

or styling by css:

.my-slider .r-range-slider-point{
   background:pink;
}
.my-slider .r-range-slider-point[data-index=0]{
   background:orange;
   border-radius:0;
}

• lineStyle (function)

<Slider 
      attrs={{className:'my-slider'}}
      start={0} 
      end={100}
      points={[20]}
      lineStyle:()=>{
            return {height:12,background:'lightblue'}
      },
/>

or styling by css:

.my-slider .r-range-slider-line{
   height:12px;
   background:lightblue;
}

• labeling and scaling

<Slider
  start={0}
  end={100}
  points={[50]}
  labelStep={10}
/> 

<Slider
  start={0}
  end={100}
  points={[50]}
  labelStep={10}
  scaleStep={5}
/> 

<Slider
  start={0}
  end={100}
  points={[50]}
  labelStep={10}
  scaleStep={5}
  scaleStyle={(value)=>{
    return {
      height:value % 10 === 0?12:7,
      background:'#888',
      width:2,
      transform:'translateX(-1px)'
    }
  }}
  labelStyle={()=>{
    return {
      top:40,
      color:'#888'
    }
  }}
/>

<Slider
  start={0}
  end={100}
  points={[50]}
  labelStep={10} 
  scaleStep={5}
  scaleStyle={(value)=>{
    return {
      width:6,
      height:6,
      top:30,
      borderRadius:'100%',
      background:'#888',
      transform:'translateX(-3px)'
    }
  }}
  labelStyle={()=>{
    return {
      top:46,
      color:'#888'
    }
  }}
  lineStyle={()=>{
    return {
      background:'#ddd'
    }
  }}
  pointStyle={()=>{
    return {
      background:'#ccc',
      border:'2px solid #888'
    }
  }}
/> 

export default class App extends Component {
  state = {date:'March'};
  render() {
    let {date} = this.state;
    let months = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December'
    ];
    return (
      <Slider
        start={0}
        end={11}
        showValue={false}
        points={[months.indexOf(date)]}
        labelStep={1}
        editLabel={(value)=>months[value].slice(0,3)}
        onChange={(points,drag)=>{
          this.setState({date:months[points[0]]})
        }}
      /> 
    );
  }
}

import React, { Component } from 'react';
import Slider from 'r-range-slider';
import './style.css';

export default class App extends Component {
  state = {points:[-500]};
  render() {
    let {points} = this.state;
    return (
      <Slider
        start={-500}
        end={500}
        points={points}
        scaleStep={10}
        scaleStyle={(value)=>{
          if(value % 100 === 0){return {height:'16px'}}
          if(value % 50 === 0){return {height:'8px'}}
          return {height:'5px'} 
        }}
        labelStep={100}
        editLabel={(value)=>{
          if(value === -300){return 'min'}
          if(value === 300){return 'max'}
          return value;      
        }}
        labelStyle={(value)=>{
          if(value === -300 || value === 300){
            return {color:'red',fontWeight:'bold',fontSize:12}
          }
        }}
      /> 
    );
  }
}

• onLabelClick

class App extends Component {
  state = {value:50};
  render() {
    let {value} = this.state;
    return (  
      <Slider
        start={0}
        end={100}
        points={[value]}
        onChange={(points)=>this.setState({value:points[0]})}
        labelStep={10}
        onLabelClick={(value)=>{
          this.setState({value})
        }}
      /> 
    );
  }
}

• awesome slider configuration1

<div className='slider-container'>   
<Slider
   points={[30]}
   labelStep={10}
   scaleStep={10}
   style={()=>{
      return {
         background:'#666',
         padding:'0 12px',
         height:24,
         borderRadius:40,
         boxShadow:'inset 0 1px 4px 0px'
      }
   }}
   pointStyle={()=>{
      return {
        width:40,
        height:40,
        background:'#aaa',
        border:'3px solid #666',
        boxShadow:'4px 4px 8px 0px rgba(0,0,0,.5)'
      }
   }}
   labelStyle={()=>{
      return {top:63,color:'#666'}
   }}      
   scaleStyle={()=>{
      return {
        width:6,
        height:6,
        top:48,
        background:'#666',
        borderRadius:'100%',
        transform:'translateX(-3px)'
      }
   }}
   lineStyle={()=>{
      return {background:'#777'}
   }}
   showValue={true}
   valueStyle={()=>{
      return {
        background:'none',
        top:-8,
        color:'#666'
      }
   }}
/>
</div>

css

body{
  background:#ccc;
}
.slider-container{
  background: linear-gradient(to bottom, #454545 0%, #ddd 100%);
  padding:10px;
  box-sizing:border-box;
  border-radius:40px; 
}

• awesome slider configuration2

<div className='slider-container'>   
<Slider
   start={1}
   end:{7}
   points={[3]}
   pointStyle={()=>{
      return {
        width:30,
        height:30,
        border:'3px solid #888',
        background:'#ddd'
      }
   }}
   scaleStep={1}
   scaleStyle={()=>{
      return {
        width:30,
        height:30,
        borderRadius:'100%',
        top:3,
        transform:'translateX(-15px)',
        background:'#888',
        zIndex:10,
      }
   }}
   lineStyle{()=>{
      return {
        background:'#888'
      }
   }}
   showValue={true}
   valueStyle={()=>{
      return {
        background:'none',
        color:'#888',
        top:-11,
        fontSize:16
      }
   }}
/>
</div>

• awesome slider configuration3

class App extends Component {
  state = {value:true};
  render() {
    let {value} = this.state;
    return (
      <div className='slider-container'>
          <Slider
            points={[value === false?0:1]}
            start={0}
            end={1}
            showValue={false}
            attrs={{
              style:{
                width:90,
                height:36,
                background:'#111',
                borderRadius:36,
                padding:'0 18px',
                boxShadow:'inset 0 2px 6px 1px #000',
                border:'1px solid',
                borderColor:'#222 #222 #333 #222',
              },
              onClick:()=>{
                this.setState({value:!value})
              }
            }}
            getText={(index)=>{
              return index === 0?'ON':'OFF';
            }}
            textStyle={(index)=>{
              if(index === 0){
                return {
                  color:'#fff',
                  transform:'translateX(-10px)'

                }
              }
              else if(index === 1){
                return {
                  color:'#fff',
                  transform:'translateX(10px)'

                }
              }
            }}
            pointStyle={()=>{
              return {
                width:36,
                height:36,
                background:'#444'
              }
            }}
            lineStyle={()=>{
              return {display:'none'}
            }}
          /> 
        
      </div>
    );
  }
}