custom-slider-pro

A highly customizable slider component for SvelteKit featuring multiple shapes, styles, and custom color options.

Installation

npm install custom-slider-pro

Usage

<script lang="ts">
  import { CustomSliderPro } from 'custom-slider-pro';

  let value = 0;
</script>

<CustomSliderPro
  bind:value
  min={0}
  max={5}
  step={1}
  type="default"
  shape="circle"
  labels={['1 Day', '1 Week', '1 Month', '3 Months', '6 Months', '1 Year']}
  colors={{
    filled: "#4296e5",   // Color of the filled track and active markers
    track: "#e5e7eb",    // Color of the unfilled track and inactive markers
    thumb: "#ffffff",    // Color of the thumb center
    border: "#4296e5"    // Color of the thumb border
  }}
/>

Props

| Prop | Type | Default | Description | | ---------------- | ------------------------------------------------------------------------------------ | --------- | ------------------------------------------------ | | value | number | 0 | Current value of the slider | | min | number | 0 | Minimum value | | max | number | 5 | Maximum value | | step | number | 1 | Step increment | | type | 'default' | 'info' | 'warning' | 'error' | 'default' | Predefined color schemes (optional if using custom colors) | | shape | 'circle' | 'roundedSquare' | 'square' | 'triangle' | 'triangleDown' | 'diamond' | 'circle' | Shape of markers and thumb | | labels | string[] | [] | Labels for each marker position | | trackHeight | number | 6 | Height of the track in pixels | | thumbSize | number | 20 | Size of the thumb in pixels | | thumbBorderWidth| number | 2 | Border width of the thumb in pixels | | colors | { filled: string, track: string, thumb: string, border: string } | undefined | Custom color scheme (overrides type) |

Features

• Multiple shape options
• Predefined color schemes
• Custom color support
• Customizable dimensions
• TypeScript support
• Accessible
• Responsive
• Keyboard navigation

Development

npm install        # Install dependencies
npm run dev       # Start development server
npm run test      # Run tests
npm run package   # Build package

License

MIT © Civoremo

Repository

GitHub

Issues

Report issues at GitHub Issues