A minimal reactjs package to render a number input with ticker selectors. 🔥🔥
OR
To run that demo on your computer:
- Clone this repository
-
npm install
-
npm start
- Visit http://localhost:3000/
import Ticker from 'react-ticker-slider'
This is the minimum code required to get started with react-ticker-slider. Other required and non-required props are documented below.
import React, { useState } from 'react'
import Ticker from 'react-ticker-slider'
const App = () => {
const [value, setValue] = useState(10)
return <Ticker
value={value}
setValue={setValue}
/>
}
export default App
name | description | default | required | type |
---|---|---|---|---|
value | value of the controlled input (should be a component state) | 0 | true | number |
setValue | function called when value changes with updated value | undefined | true | function ⎮ undefined |
min | minimum value of the input | 0 | false | number |
max | maximum value of the input | 100 | false | number |
majorGap | gap between taller (prominent) ticks | 10 | false | number |
minorGap | gap between smaller ticks | 2 | false | number |
hideText | if true, hides the value text | false | false | boolean |
textFormatter | function that takes in the value and can be used to format it | undefined | false | function ⎮ undefined |
throttleScroll | if true, applies throttling while scroll improves performance, decreases UX | false | false | boolean |
throttleTimeout | delay for scroll throttle | 250 | false | number |
stickMaxWidth | max width between two sticks in vw | 4 | false | number |
knobClassName | className for the knob pointer | '' | false | string |
containerClassName | className for the outermost container | '' | false | string |
textClassName | className for the top text | '' | false | string |
tickerClassName | className for the container that contains all the sticks | '' | false | string |
tickClassName | className for all the sticks (tall and small both) | '' | false | string |
largeTickClassName | className for the taller sticks | '' | false | string |
tickLabelClassName | className for the label text displayed beneath taller sticks | '' | false | string |
Other thing that should be taken care of is that majorGap, the difference between max and min, both should be a multiple of the minGap.