Security News
How Threat Actors are Abusing GitHub’s File Upload Feature to Host Malware
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
vue-histogram-slider
Advanced tools
Readme
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 vue-histogram-slider
npm i vue-histogram-slider
import Vue from 'vue';
import HistogramSlider from 'vue-histogram-slider';
import '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 |
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 vue-histogram-slider receives a total of 509 weekly downloads. As such, vue-histogram-slider popularity was classified as not popular.
We found that 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
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.