Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@dreysolano/vue-histogram-slider
Advanced tools
Readme
FORK UPDATES:
from
and to
props to allow pre-selecting a min/max range
Range slider with histogram for Vue
If you are a try and learn developer, you can start trying the vue-histogram-slider now using codesandbox.io.
yarn add @dreysolano/vue-histogram-slider
npm i @dreysolano/vue-histogram-slider
import Vue from 'vue'
import HistogramSlider from '@dreysolano/vue-histogram-slider'
import '@dreysolano/vue-histogram-slider/dist/histogram-slider.css'
Vue.component(HistogramSlider.name, HistogramSlider)
<HistogramSlider
:width="600"
:bar-height="100"
:data="data"
/>
Property | Type | Default | Description |
---|---|---|---|
min | number | 1 | Set slider minimum value |
max | number | 100 | Set slider maximum value |
from | number | {min} | Set left/min slider position |
to | number | {max} | Set right/max slider position |
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 | 600 | width of dialog |
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) |
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. |
FAQs
Range slider with histogram for vue.js
The npm package @dreysolano/vue-histogram-slider receives a total of 313 weekly downloads. As such, @dreysolano/vue-histogram-slider popularity was classified as not popular.
We found that @dreysolano/vue-histogram-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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.