Socket
Socket
Sign inDemoInstall

vue3-slider

Package Overview
Dependencies
21
Maintainers
1
Versions
48
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-slider

A modern, customizable slider built entirely in Vue.js 3 with TypeScript in under 5KB (gzipped) and dependency free. (horizontal, vertical and circular slider)


Version published
Maintainers
1
Weekly downloads
1,396
decreased by-12.75%

Weekly downloads

Readme

Source

🔥 Vue 3 Slider 🔥 Become a Stargazer

Horizontal, vertical and circular sliders! Fully responsive, touch screen and keyboard control support!

Table of Contents 📰

Demo (Live Demo)

Demo

Installation

# with npm
npm install vue3-slider
# with yarn
yarn add vue3-slider

Getting Started 👍

Import component

import slider from "vue3-slider"

export default {
  ...
  components: {
    "vue3-slider": slider
  }
  ...
}

How to use

<vue3-slider v-model="myNumber" color="#FB278D" track-color="#FEFEFE" />

Props

NameTypeRequiredDefaultRules
v-modelNumber✔️
widthString100%must be valid css length
heightNumber6
handleScaleNumber1.35
alwaysShowHandleBooleanfalse
colorString#FB2727must be a valid hex, rgb, rgba or html color value
trackColorString#F1F6F8^^^
maxNumber100cannot be less than min
minNumber0cannot be greater than max
limitNumber
stepNumber1
tooltipBooleanfalse
tooltipTextString"%v"must contain %v (%v is replaced with slider's value)
tooltipColorString#FFFFFFmust be a valid hex, rgb, rgba or html color value
tooltipTextColorString#000000^^^
formatTooltipFunctionnullfunction must take one parameter (number) and return a string
flipTooltipBooleanfalse
orientationStringhorizontalrestricted choice (horizontal, vertical, circular)
repeatBooleanfalse
stickyBooleanfalse
flipBooleanfalse
circleOffsetNumber0must be between 0 and 360 (inclusive)
circleGapNumber0must be between 0 and 360

NOTE: When using the circular slider width is the diameter of the circle and height is the stroke width

NOTE: When using the circular slider it is advised to use absolute units for width to avoid issues

NOTE: circleOffset is calculated in degrees clockwise from the top of the circle (anti-clockwise with flip set to true)

Events

change
  • Arguments: (value: number)
  • Usage: The event is fired when the slider value changes
drag-start
  • Arguments: (value: number, event: MouseEvent | TouchEvent)
  • Usage: The event is fired when the user presses the slider
drag-end
  • Arguments: (value: number, event: MouseEvent | TouchEvent)
  • Usage: The event is fired when the user releases the slider
dragging
  • Arguments: (value: number, event: MouseEvent | TouchEvent)
  • Usage: The event is fired when the user drags the slider

Contributing

Prerequisites

  • node (latest version)
  • yarn (1.^22.10)

Setup

# clone repo
git clone https://github.com/freddie-nelson/vue3-slider
cd vue3-slider

# install deps
npm i
# with yarn
yarn

# start dev server
npm run serve
# with yarn
yarn serve

License

MIT

Copyright © 2020 - Present, Freddie Nelson

Contact

Keywords

FAQs

Last updated on 20 Jun 2023

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc