@psff/cmp-slider

@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

• Setup the package as a dependency.

  yarn add @psff/cmp-slider
  

• 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))