A Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options.

Overview

range-comp

range-comp is Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options.

range-comp can be installed via with the included package.json file for a local installation via the npm install command. range-comp depends on the vue.js framework. A demo folder is provided that used Parcel together with its associated package.json file to bundle together range-comp along with its vue.js dependency for a simple application. Further details are provided below for running the demo.

Props

A prop in Vue.js is a custom attribute for passing information from a parent component hosting range-comp instance(s) to an range-comp as a child component.

range-comp has the following props for a parent to bind and send information to:

heading -- a heading for the component that can be positioned above, below, or to the left of the input box (string, default: null)

rangeValue -- sets the value of range-comp (number, default: null)

headerPosition -- determines the position of the above headingas 'above', 'below', or 'left' (string, default: 'left')

min, max, step -- javascript numbers that define range-comp's minimum, maximum and step for selecting range (number, default: 0)

cssVariables -- defines the css variables for range-comp (object, default: null)

Styling

The cssVariables prop is a javascript object that contains any combination of css variable names as keys and associated values for quick, limited styling of range-comp. The following list is the css variable names along with their default values:

  {
  		range_comp_font_family: 'Verdana,serif',
  		range_comp_heading_color: 'black',
  		range_comp_heading_font_weight: 'bold',
  		range_comp_thumb_background: 'radial-gradient(ellipse at center, #e4f5fc 0%,#6e6bff 66%)',
  		range_comp_track_width: '25rem',
  		range_comp_track_background: 'linear-gradient(to bottom, #969696 0, #969696 13%, #5f5f5f 33%, #1e1e1e 64%, #1e1e1e 100%)',
  		range_comp_track_focus_background: '#445',
  		range_comp_value_color: 'black'
  }

As an example you could bind the following object to an instance of range-comp to set the heading font size and the track width:

{range_comp_heading_color: 'gold', range_comp_track_width: '520px'}

Note that multiple range-comp children of the parent can each be bound to a unique set of css_variableprop objects. To enforce the same styling across all range-comp children, simply bind just one css_variable prop object to all the input-comp children.

Events

range-comp has a single one way event (rangeCompValueChanged) that is emitted to the parent with the current value when the range value changes. The parent can listen for this event and do further processing with the value. Events emitted from a child component back to the parent is explained at Vue Custom Events.

Demonstration

One demonstration of range-comp is provided in the folder named demo/dist-prod and can be viewed by hosting the index.htmlfile. The demo (templated in the App.vue file) modifies the layout of the heading, some component styling and listens for changes of the range and show the current value on the browser's console. In addition a button when clicked increases the range_value property until it reaches the range maximum, then resets to the range minimum.

As a suggestion, install http-server locally/globally via npm then enter the command http-serverin the range-comp dist-prod directory. From a browser enter the url: localhost:8080/ to view the demo.

Here is some example code for using range-comp taken from the App.vue file:

Change Value ">
      
      
   
      
   

And the supporting data references:

  data() {
    return {
      number_value: 25,
      range_value: null,
      min: 10,
      max: 40,
      step: .5,
      css_variables: {
        range_comp_heading_color: 'white',
        range_comp_input_color: 'white',
        range_comp_input_border_color: 'white',
        range_comp_value_color: 'white'
      }
    }
  },
  methods: {
  	//function that responds to change in range
    show_value: function(value){
      console.log(value);
    },
    set_range_value: function(){
      this.number_value += .5;
      if(this.number_value > 39){
        this.number_value = 10;
      }
      this.range_value = this.number_value;
    }
  },
  mounted() {
    this.range_value = 25;
  }
You might also like...
A custom input number component for Vue.js 2

vue-input-number A custom input number component for Vue.js 2. Install Yarn yarn add vue-input-number --dev NPM npm install vue-input-number --save-de

A versetile tag input component built with Vue 3 Composition API
A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Split Input Component for Vue 3.x

Split Input Component for Vue 3.x Used for otps, transaction pin, passwords etc Install NPM npm i vue-split-input --save Yarn yarn add vue-split-inpu

Yet another Vue component for input masking

vue-input-mask Yet another Vue component for input masking. Based on react-input-mask. Demo Install yarn add vue-input-mask or npm i -S vue-input-mask

base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)
base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)

vue-input-code 基于Vue2.0+的移动端验证码输入组件. 功能预览 输入时回调 结果回调 自定义错误处理 自定义验证码个数 样式可控 这里是可爱的Demo 支持 支持 Vue.js 2.0+. 安装和使用 npm install vue-input-code --save 作为全局组

A tags input component for VueJS

A tags input component for VueJS

Tiny (2k gzipped) and dependency free mask input for Vue.js
Tiny (2k gzipped) and dependency free mask input for Vue.js

The Mask A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js Docs and Demo JsFiddle Install yarn add vue-the-mask o

A lightweight and dependency free input masking library created specific for Vue

Vue Input Facade A lightweight and dependency free input masking library created specific for Vue Docs and Demo Installing npm i vue-input-facade yarn

Simple zero-dependency input mask for Vue.js and vanilla JS.

Simple zero-dependency input mask for Vue.js and vanilla JS.

Owner
null
Vue Currency Input component allows an easy input of currency formatted numbers

Vue Currency Input The Vue Currency Input component allows an easy input of currency formatted numbers. It provides both standalone component (<curren

WeblineIndia 1 May 25, 2022
Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue.

Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue. Capable of formatting as the user types, including currency formatting. With no extra dependencies other than Vue itself.

Jack Steel 4 Dec 9, 2021
Input mask library for vue.js based on credit-card-input-mask

vue-restricted-input Input mask for vue.js based on credit-card-input-mask Why ? credit-card-input-mask perfect work with carriage position, fast. Ins

Ivan Demidov 11 Nov 21, 2021
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

Myo Kyaw Htun 22 Apr 24, 2022
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

vue-otp-input A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API. Installation To install the la

Ejiro Asiuwhu 39 Sep 23, 2022
A tags input component for Vue 3 with autocompletion, custom validation, templating and much more

vue-tags-input A tags input component for Vue 3 with autocompletion, custom validation, templating and much more Forked from @johmun/vue-tags-input, w

Sinclair Chen 16 Aug 31, 2022
A jQuery Plugin to make masks on form fields and HTML elements.

jQuery Mask Plugin A jQuery Plugin to make masks on form fields and HTML elements. Documentation, Demos & Usage Examples https://igorescobar.github.io

Igor Escobar 4.6k Sep 30, 2022
Vue Fake input is a Vue.js based component to create custom inputs for individual characters.

Vue Fake Input Vue Fake input is a Vue.js based component to create custom inputs for individual characters. Table of Contents Installation Usage Lice

Cláudio Luiz Castro 84 Jul 26, 2022
Masked input component for Vue.js

Vue Masked Input Dead simple masked input component for Vue.js 2.X. Based on inputmask-core. Live Demo Install npm npm install vue-masked-input --save

null 452 Sep 3, 2022
Input field component to display a formatted currency value based on Vue.js

vue-numeric Input field component to display a formatted currency value based on Vue. Live Demo Works with Vue 2.* Installation Install via CDN <scrip

Kevin Ongko 420 Sep 24, 2022