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.
vue3-histogram-slider
Advanced tools
Readme
Range slider with histogram for Vue 3
If you are a try and learn developer, you can start trying the vue3-histogram-slider now using codesandbox.io.
yarn add vue3-histogram-slider
npm i vue3-histogram-slider
import HistogramSlider from "vue3-histogram-slider";
import "vue3-histogram-slider/dist/histogram-slider.css";
...
app.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 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) |
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 3
The npm package vue3-histogram-slider receives a total of 427 weekly downloads. As such, vue3-histogram-slider popularity was classified as not popular.
We found that vue3-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.