vue3-histogram-slider-v2

Range slider with histogram for Vue 3

🚀 Quick Start

If you are a try and learn developer, you can start trying the vue3-histogram-slider now using codesandbox.io.

FORK UPDATES:

• Add new from and to props to allow pre-selecting a min/max range

📦 Installation

yarn

yarn add vue3-histogram-slider-v2

npm

npm i vue3-histogram-slider-v2

🔧 Usage

import HistogramSlider from "vue3-histogram-slider-v2";
import "vue3-histogram-slider-v2/dist/histogram-slider.css";
...
app.component(HistogramSlider.name, HistogramSlider);

<HistogramSlider
    :width="600"
    :bar-height="100"
    :data="data"
/>

📋 Props

Property	Type	Default	Description
min	number	1	Set slider minimum value
max	number	100	Set slider maximum value
from	number	1	Set slider start value
to	number	100	Set slider end value
data	array	-	Data for histogram
block	boolean	false	Locks slider and makes it inactive
grid	boolean	true	Enables grid of values.
gridNum	number	4	Number of grid units.
step	number	1	Set sliders step. Always > 0. Could be fractional.
hideMinMax	boolean	true	Hides min and max labels
hideFromTo	boolean	false	Hides from and to labels
toFixed	boolean	false	Fix position of right handle.
fromFixed	boolean	false	Fix position of left (or single) handle.
forceEdges	boolean	false	Slider will be always inside it's container.
dragInterval	boolean	false	Allow user to drag whole range. Only in double type
keyboard	boolean	true	Activates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D.
type	string	double	Choose slider type, could be single - for one handle, or double for two handles
width	number or string	600	width of histogram
barHeight	number	100	Set max histogram bar height
barWidth	number	6	Set histogram bar width
barGap	number	5	Set histogram bar gap
barRadius	number	4	Set histogram bar radius
prettify	function	null	Set up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than transform them to cool looking dates.
lineHeight	number	6	Set slider line height
transitionDuration	number	100	Set duration to histogram bars
primaryColor	string	#0091ff	Primary color
labelColor	string	#0091ff	Label color
holderColor	string	#dee4ec	Holder color
handleColor	string	#ffffff	Slider handle color
gridTextColor	string	silver	Primary color
fontFamily	string	'Arial, sans-serif'	Set text font family
fontSize	number	12	Set text font size
handleSize	number	26	Slider handle size
histSliderGap	number	6	Set gap between slider and histogram
updateColorOnChange	boolean	true	Update histogram bar color on change (recommended false for performance)
clip	boolean	true	Allow dragging a selection to clip graph range
resettable	boolean	false	Allow zoom reset to a button passed in a slot (with default slot available)

🔧 Event

Name	Description
start	Triggers when slider start.
change	Triggers when each values change.
update	Triggers when slider is modified by external methods update or reset.
finish	Triggers when user releases handle.