JSPM

vue3-histogram-slider-v2

0.1.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 31
  • Score
    100M100P100Q59134F
  • License MIT

Range slider with histogram for Vue 3

Package Exports

  • vue3-histogram-slider-v2
  • vue3-histogram-slider-v2/dist/histogram-slider.umd.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue3-histogram-slider-v2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Range slider with histogram for Vue 3

npm GitHub issues npm

🚀 Quick Start

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

Edit Vue Histogram Slider

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.