Simple slider component of Vue.js

Simple slider component of Vue.js

A custom range slider for vue, that builds on the native range slider, but supports stuff like custom values, labels and more.This is a simple vue-range slider, that supports custom values, labels and more.

vue-custom-range-slider

This is a simple vue-range slider, that supports custom values, labels and more. The component is based on use with v-model, the value is always a string, for supporting custom values.

Demo

See the slider in action, in this codesandbox

Installation

NPM

source-shell
npm install --save vue-custom-range-slider

Yarn

source-shell
yarn add vue-custom-range-slider

Usage examples

Usage like a native range slider

text-html-basic
<template>
  <div>
    <custom-slider min="10" max="50" step="2" raising v-model="slider" />
    {{ slider }}
  </div>
</template>

<script>
  import CustomSlider from "vue-custom-range-slider";
  // import the styling, css or scss
  import "vue-custom-range-slider/dist/vue-custom-range-slider.css";

  export default {
    components: {
      CustomSlider
    },
    data() {
      return {
        slider: "12"
      };
    }
  };
</script>

Usage with custom values

text-html-basic
<template>
  <div>
    <custom-slider :values="sliderValues" raising v-model="slider" />
    {{ slider }}
  </div>
</template>

<script>
  import CustomSlider from "vue-custom-range-slider";
  // import the styling, css or scss
  import "vue-custom-range-slider/dist/vue-custom-range-slider.css";

  export default {
    components: {
      CustomSlider
    },
    data() {
      return {
        slider: "a",
        sliderValues: [
          {
            label: "Not at all",
            value: "a"
          },
          {
            label: "A tiny bit",
            value: "b"
          },
          {
            label: "Its ok",
            value: "c"
          },
          {
            label: "Its very good",
            value: "d"
          },
          {
            label: "Its AMAZING!",
            value: "e"
          }
        ]
      };
    }
  };
</script>

Properties:

All properties are optional | Property | Description | Type | Default | |-----------|-------------------------------------------------------------------------------|-----------|---------| | values | Pass an array of custom values, with corresponding labels (overrides min/max) | array | [] | | min | Sets the minimum value of the slider | string | '0' | | max | Sets the maximum value of the slider | string | '100' | | step | Sets the stepping interval | string | '1' | | hideLabel | Set, if you want to hide the label above the slider | boolean | false | | raising | Set if you want a "raising" shape, like: ◁ | boolean | false |

Events

Name Description Type
change Emits the current value on change string

Styling

You can easily modify the look of the slider, by overriding the variables in the scss file.

source-sass
// override variables like this:
$label-color: red;

// import the styling,
@import "vue-custom-range-slider/dist/vue-custom-range-slider.scss";

All variables can be found in the scss file

Roadmap

  • Disabled properties
  • Name attributes for form handling
  • Better styling options

Contribution

If you have suggestions for improvements, dont hesitate to make an issue or pull request. :)

Github

Bjornnyborg/vue-custom-range-slider

vuejs javascript vue-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Vue.js JWT Authentication with Vuex and Vue Router

Build a Vue.js JWT Authentication application using Vuex, Vue Router, VeeValidate - JWT authentication with Vue, Vuex, Vue Router that supports VeeValidate