r-range-slider
Advanced tools
all in one range slider, single range , double range , multi range
r-range-slider is a range slider created by reactjs.
npm install r-range-slider
import Slider from "r-range-slider";
import React from 'react';
| 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 |
<Slider points={[20]} start={0} end={100}/>
<Slider points={[20,60]} start={0} end={100}/>
<Slider points={[20,60,80,100]} start={0} end={100}/>
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>
</>
);
}
}
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]})}
/>
);
}
}
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]})}
/>
);
}
}
<Slider />
<Slider
showValue={true}
/>
<Slider
showValue={false}
/>
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'
/>
);
}
}
<Slider
attrs={{className:'my-slider'}}
points={[30]}
showValue={true}
valueStyle={()=>{
return {
background:'orange',
fontSize:16,
top:-30
}
}}
/>
.my-slider .r-range-slider-value{
background:orange;
fontSize:16px;
top:-30px;
}
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'
}
}}
/>
);
}
}
.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;
}
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 + '%'}
/>
);
}
}
<Slider
attrs={{className:'my-slider'}}
points={[20]}
start={0}
end={100}
fillStyle={()=>{
return {background:'dodgerblue'}
}}
/>
.my-slider .r-range-slider-fill{
background:dodgerblue;
}
<Slider
attrs={{className:'my-slider'}}
points={[20]}
start={0}
end={100}
fillStyle={(index)=>{
if(index === 0){
return {background:'dodgerblue'}
}
}}
/>
.my-slider .r-range-slider-fill[data-index=1]{
background:dodgerblue;
}
<Slider
attrs={{className:'my-slider'}}
start={0}
end={100}
points={[20,50]}
fillStyle={(index)=>{
if(index === 1){
return {background:'dodgerblue'}
}
}}
/>
.my-slider .r-range-slider-fill[data-index=1]{
background:dodgerblue;
}
<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'}
}
}}
/>
.my-slider .r-range-slider-point{
background:pink;
}
.my-slider .r-range-slider-point[data-index=0]{
background:orange;
border-radius:0;
}
<Slider
attrs={{className:'my-slider'}}
start={0}
end={100}
points={[20]}
lineStyle:()=>{
return {height:12,background:'lightblue'}
},
/>
.my-slider .r-range-slider-line{
height:12px;
background:lightblue;
}
<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}
}
}}
/>
);
}
}
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})
}}
/>
);
}
}
<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;
}
<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>
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>
);
}
}
FAQs
all in one range slider, single range , double range , multi range
The npm package r-range-slider receives a total of 95 weekly downloads. As such, r-range-slider popularity was classified as not popular.
We found that r-range-slider demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).
Product
Customize license detection with Socket’s new license overlays: gain control, reduce noise, and handle edge cases with precision.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.