@psff/cmp-slider v1.0.3

@psff/cmp-slider psff-slider

Wrapper component of the native input[type="range"] that allows the user to pick a value from a range guided by defined steps of any size.

Getting started

1. Setup the package as a dependency.

   yarn add @psff/cmp-slider

2. Use the component <psff-slider />.

   import PsffSlider from '@psff/cmp-slider'
   
   @Component({
     components: {
       'psff-slider': PsffSlider,
     },
   })
   export default class MyComponent extends Vue {
     private happinessLevel: number = 5;
   }

   <psff-slider v-model="happinessLevel" :min="1" :max="10" />

Specifications

Parameters:

Will pass through all the attributes to the native input range.

• value (number, default: half between min and max): current number value of the field.
• step (number, default: 1): ammount modified on every increase/decrease interaction.
• min (number, default: 0): bottom limit of the value.
• max (number, default: 100): top limit of the value.

IMPORTANT: value, step, min and max have to be passed like numbers (:max="100").

Events

• input (number): every time the value change
• change (number): value change when blur or enter

Custom properties:

• Thumb handler

  • --psff-slider-thumb-color (default #648CFA)
  • --psff-slider-thumb-color-active (default #3066F9)
  • --psff-slider-thumb-shadow-color-active (default #97B3FC)
  • --psff-slider-thumb-size (default 1.5rem)

• Track

  • --psff-slider-track-color (default #CBD9FD)
  • --psff-slider-track-height (default .25rem)

• Progress (track on the left side of the thumb)

  • --psff-slider-progress-color (default var(--psff-slider-thumb-color))