react-rubber-slider's Introduction

<RubberSlider/>

Installation

$ npm i @shwilliam/react-rubber-slider
$ npm i @reach/slider d3

Usage

import React, {useState} from 'react'
import RubberSlider from '@shwilliam/react-rubber-slider'
import '@shwilliam/react-rubber-slider/dist/styles.css'

export const App = () => {
  const [value, setValue] = useState(0.5)

  return <RubberSlider width={250} value={value} onChange={setValue} />
}

Component API

Prop	Type	Required	Default
name	string	false	undefined
id	string	false	'rubber-slider'
value	number	false	0
onChange	function	false	no-op
width	number	false	200
height	number	false	100
max	number	false	100
min	number	false	0
step	number	false	1
easeFunction	function	false	d3.easeElastic
easeDuration	number	false	700
onDragStart	function	false	no-op
onDrag	function	false	no-op
onDragEnd	function	false	no-op

Styling

Override the default slider styles by targeting the following:

.rubber-slider {
}
.rubber-slider-input {
}
.rubber-slider-pseudo-track {
}
.rubber-slider-pseudo-handle {
}

Development

To start local development, simply install npm dependencies (npm i) and run npm run build:watch to watch ts files in src/. Built files can be found in dist/.

Testing

To run existing tests locally, run the command npm t, or npm run test:watch for watch mode.

Demo

To run the demo, ensure you have run the build script and have a dist dir in your project root. Then run npm run demo:setup to copy these to the demo and npm run demo to start it locally.

Contributing

This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the issues. If you wish to work on this project:

Fork this project
Create a branch (git checkout -b new-branch)
Commit your changes (git commit -am 'add new feature')
Push to the branch (git push origin new-branch)
Submit a pull request!

react-rubber-slider's People

Contributors

Stargazers

Watchers

react-rubber-slider's Issues

TypeError: undefined is not iterable (cannot read)

Hello, I found a bug while I was using your library.

After analyzing the cause by hanging the debug point, it seems that if there is another svg on the page where the slider is rendered when selecting the svg by d3, it is a problem caused by not being selected exactly.

Is it okay if I send a PR message about this problem?

IDEA: Is it possible to change precision, when sliding to the sides from up or from down

IDEA: Is it possible to change precision, when sliding to the sides from up or from down, for examle:

I woul like to setup temperature from 0 to 1000°C and I would like to set value for example: 555.123°C. In this case can be rubber slider very effective solution.

If I will move slider to the up and slowly to the right, the temperature can increase 50°, for example 50,100,150,200....
When I will move slider to down, the accuracy will change smoothly.

For example, when I will move slider to the totally down, temperature will be increasing very slowly by 0.001°C

Summary:
moving right and left will be increasing/decreasing value /like now/

moving up and down will be changing the accuracy /size of one step of the slider/.

Thanks a lot. :-)

IMPORTANT ISSUE: Slider is not working, when any SVG is situated inside the code before rubber slider => it will cause the following error: Cannot read property 'length' of undefined

Check the following example:
https://codesandbox.io/s/shwilliam-react-rubber-slider-demo-forked-qchvv?file=/src/App.js

Thanks a lot for your help.

Recommend Projects

shwilliam / react-rubber-slider Goto Github PK