Slider

<pa-slider> | PaSlider

A customizable range slider component for selecting numeric values within a defined range. Perfect for settings, filters, price ranges, and any interface where users need to select values from a continuous range with visual feedback.

Usage

Use pa-slider to allow users to select numeric values by dragging a handle along a track:

Volume

Current value: 50

<template>
  <pa-slider 
    v-model="volume" 
    label="Volume" 
    :max="100" 
    :interval="5"
    variant="primary"
    @update:modelValue="onVolumeChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const volume = ref(50)

const onVolumeChange = (value) => {
  console.log('Volume changed to:', value)
}
</script>

Examples

Basic Slider

Progress

Progress: 25%

<template>
  <pa-slider 
    v-model="progress" 
    label="Progress" 
    :max="100"
  />
</template>

<script setup>
import { ref } from 'vue'

const progress = ref(25)
</script>

Custom Range and Interval

Price Range ($)

Max Price: $500

<template>
  <pa-slider 
    v-model="maxPrice" 
    label="Price Range ($)" 
    :max="1000"
    :interval="50"
    variant="primary"
  />
</template>

<script setup>
import { ref } from 'vue'

const maxPrice = ref(500)
</script>

Different Variants

Primary Variant

Primary: 30

Secondary Variant

Secondary: 70

<template>
  <div>
    <pa-slider 
      v-model="primaryValue" 
      label="Primary Variant" 
      :max="100"
      variant="primary"
    />
    
    <pa-slider 
      v-model="secondaryValue" 
      label="Secondary Variant" 
      :max="100"
      variant="secondary"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const primaryValue = ref(30)
const secondaryValue = ref(70)
</script>

Fine-Tuned Controls

Precision Control

Precision value: 5.5
Step size: 0.1

<template>
  <pa-slider 
    v-model="precision" 
    label="Precision Control" 
    :max="10"
    :interval="0.1"
    variant="primary"
    @update:modelValue="onPrecisionChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const precision = ref(5.5)

const onPrecisionChange = (value) => {
  console.log('Precision value:', value.toFixed(1))
}
</script>

Form Integration

Brightness (%)

Contrast (%)

Current Settings:
Brightness: 80%
Contrast: 60%

<template>
  <form @submit.prevent="submitSettings">
    <pa-slider 
      v-model="settings.brightness" 
      label="Brightness (%)" 
      :max="100"
      :interval="5"
      variant="primary"
    />
    
    <pa-slider 
      v-model="settings.contrast" 
      label="Contrast (%)" 
      :max="100"
      :interval="5"
      variant="primary"
    />
    
    <pa-button type="submit" variant="primary">Apply Settings</pa-button>
  </form>
</template>

<script setup>
import { reactive } from 'vue'

const settings = reactive({
  brightness: 80,
  contrast: 60
})

const submitSettings = () => {
  console.log('Settings:', settings)
  // Apply display settings
}
</script>

Importing

import { PaSlider } from '@payadvantage/ui-components'

Properties

Property	Type	Default	Description
modelValue	Number	0	The current value of the slider (used with v-model)
max	Number	0	Maximum value that can be selected
interval	Number	1	Step size for value increments/decrements
tooltip	String	'none'	Tooltip display mode: 'none', 'always', 'focus', 'hover', 'active'
label	String	null	Label text displayed alongside the slider
variant	String	'primary'	Visual style variant of the slider

Events

Event	Parameters	Description
update:modelValue	value: number	Emitted when the slider value changes (for v-model support)

Dependencies

• vue-3-slider-component - Provides the underlying slider functionality and interaction
• Bootstrap 5 - Provides base styling and layout classes

Usage Notes

Value Management

The slider uses v-model for two-way data binding. The component automatically handles value updates and emits changes through the update:modelValue event.

Interval and Precision

• Use interval to control the step size between values
• For decimal precision, use smaller intervals like 0.1 or 0.01
• The slider will snap to the nearest valid value based on the interval

Accessibility

• The underlying vue-3-slider-component provides keyboard navigation support
• Labels provide context for screen readers
• The slider maintains focus states for keyboard users

Styling Variants

Different variants provide visual theming:

• primary - Standard brand styling
• secondary - Alternative brand styling
• Additional variants may be available based on your theme configuration

Form Integration

When used in forms:

1. Use v-model for easy form data binding
2. Combine with validation using the PayAdvantage form validation system
3. Group related sliders using appropriate spacing and labels
4. Provide clear value feedback through labels or display components

Performance Considerations

• The slider updates in real-time as the user drags
• For expensive operations, consider debouncing the update:modelValue handler
• Large ranges with small intervals may impact performance on slower devices

Best Practices

1. Clear Labels - Always provide descriptive labels that explain what the slider controls
2. Appropriate Ranges - Set max values that make sense for your use case
3. Reasonable Intervals - Choose intervals that provide useful granularity without being too fine
4. Visual Feedback - Consider showing the current value in the label or nearby
5. Accessible Design - Ensure sufficient color contrast and touch target sizes