ktsn / Vue Range Slider
Licence: mit
Simple slider component of Vue.js
Stars: ✭ 117
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Range Slider
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (+84.62%)
Mutual labels: component, sass
React Component Library
A project skeleton to get your very own React Component Library up and running using Rollup, Typescript, SASS + Storybook
Stars: ✭ 313 (+167.52%)
Mutual labels: component, sass
React Toggle Switch Demo
Source code for a simple demo app showing how to build a custom toggle switch for React applications.
Stars: ✭ 15 (-87.18%)
Mutual labels: component, sass
Styled Jsx Plugin Sass
Plugin to add Sass support to styled-jsx. Warning this is a Proof Of Concept plugin.
Stars: ✭ 115 (-1.71%)
Mutual labels: sass
Vcomponents
VComponents is a SwiftUI framework that contains 40+ customizable UI components
Stars: ✭ 117 (+0%)
Mutual labels: component
Tinseltown.js
A lightweight CSS/JS library for faux hacker-movie-style page loading effects
Stars: ✭ 113 (-3.42%)
Mutual labels: sass
Vue Api Request
Control your API calls by using an amazing component which supports axios and vue-resource
Stars: ✭ 116 (-0.85%)
Mutual labels: component
React Relative Portal
React component for place dropdowns outside overflow: hidden; elements
Stars: ✭ 114 (-2.56%)
Mutual labels: component
Styled Typography
Typograpy components for react and styled-components
Stars: ✭ 113 (-3.42%)
Mutual labels: component
Error Handler
The ErrorHandler component provides tools to manage errors and ease debugging PHP code.
Stars: ✭ 1,852 (+1482.91%)
Mutual labels: component
Alert
⚠️ Alert is a simple notification that appears on the top of the screen.
Stars: ✭ 113 (-3.42%)
Mutual labels: component
Fictoan
Mockups with markup — https://sujan-s.github.io/fictoan/
Stars: ✭ 114 (-2.56%)
Mutual labels: sass
Aura.ui
A Library with a lot of Controls for AvaloniaUI
Stars: ✭ 114 (-2.56%)
Mutual labels: component
vue-range-slider
Simple slider component of Vue.js
Features
- Compatible with native
input[type="range"]
behavior -
input
,change
event support - Touch device support
Requirements
Vue >= 2.0
Installation
NPM
npm install --save vue-range-slider
Yarn
yarn add vue-range-slider
Usage
Basic Usage
Just import vue-range-slider component and use it in your components. The props are compatible with native input[type="range"]
element, so you can use min
, max
, step
etc. like native element.
<template>
<range-slider
class="slider"
min="10"
max="1000"
step="10"
v-model="sliderValue">
</range-slider>
</template>
<script>
import RangeSlider from 'vue-range-slider'
// you probably need to import built-in style
import 'vue-range-slider/dist/vue-range-slider.css'
export default {
data () {
return {
sliderValue: 50
}
},
components: {
RangeSlider
}
}
</script>
<style>
.slider {
/* overwrite slider styles */
width: 200px;
}
</style>
Available props:
-
name
- name of the slider input. -
value
- current value of the slider. -
disabled
- if true, the slider value cannot be updated. -
min
- minimum value of the slider. -
max
- maximum value of the slider. -
step
- granularity of the slider value. e.g. if this is 3, the slider value will be 3, 6, 9, ...
Available slots:
-
knob
- slot for replacing knob
Overwrite Default Styles
vue-range-slider is built with Sass for its styling. If you want to customize vue-range-slider styles, you can easily do that by configuring Sass variables. Available variables can be seen in the component file.
Example of making the slider knob larger:
// set the variable of the knob size
$knob-size: 30px;
// import the built-in vue-range-slider style
@import '~vue-range-slider/dist/vue-range-slider.scss';
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].