custom-slider-pro

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

Preview Page

Preview

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 allowed | | max | number | 5 | Maximum value allowed | | step | number | 1 | Step increment between values | | type | 'default' | 'info' | 'warning' | 'error' | 'default' | Visual style variant of the slider | | labels | string[] | | Labels for each marker position | | showLabels | boolean | true | Whether to show labels | | showMarkers | boolean | true | Whether to show markers | | showValue | boolean | false | Whether to show current value above thumb | | valueDisplay | string | (value: number) => string | | Custom value display above thumb (string or function) | | valueDisplayBg | string | | Custom background color for value display | | valueDisplayColor | string | | Custom text color for value display | | valueDisplayFontSize | string | | Custom font size for value display (e.g. '16px', '1.2rem') | | valueDisplayFont | string | | Custom font family for value display (e.g. 'Arial', 'Roboto') | | shape | 'circle' | 'roundedSquare' | 'square' | 'triangle' | 'triangleDown' | 'diamond' | 'circle' | Shape of the markers and thumb | | 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 | ColorScheme | | Custom color for all parts |

Custom Value Display

You can fully customize the value display above the thumb:

• Text: Pass a string or a function to valueDisplay.
• Background: Use valueDisplayBg for background color. Leave empty or undefined for transparent.
• Text color: Use valueDisplayColor for text color.
• Font size: Use valueDisplayFontSize to set custom font size (e.g. '16px', '1.2rem').
• Font family: Use valueDisplayFont to set custom font family (e.g. 'Arial', 'Roboto').

Examples

<!-- Custom string value, custom background and text color -->
<CustomSliderPro
  value={2000}
  min={0}
  max={5000}
  showValue={true}
  valueDisplay="$2,000"
  valueDisplayBg="#fffbe6"
  valueDisplayColor="#b91c1c"
  showMarkers={false}
  showLabels={false}
/>

<!-- Custom function value, custom background and text color -->
<CustomSliderPro
  value={2000}
  min={0}
  max={5000}
  showValue={true}
  valueDisplay={v => v === 2000 ? 'two thousand' : v}
  valueDisplayBg="black"
  valueDisplayColor="lime"
  showMarkers={false}
  showLabels={false}
/>

<!-- Default formatting, custom colors -->
<CustomSliderPro
  value={1500}
  min={0}
  max={5000}
  showValue={true}
  valueDisplayBg="#e0f7fa"
  valueDisplayColor="#006064"
  showMarkers={false}
  showLabels={false}
/>

<!-- No background (transparent) -->
<CustomSliderPro
  value={2000}
  min={0}
  max={5000}
  showValue={true}
  valueDisplay="No background"
  valueDisplayBg=""
  valueDisplayColor="#b91c1c"
  showMarkers={false}
  showLabels={false}
/>

<!-- Custom font and size -->
<CustomSliderPro
  value={2000}
  min={0}
  max={5000}
  showValue={true}
  valueDisplay="$2,000"
  valueDisplayFontSize="1.2rem"
  valueDisplayFont="Roboto, sans-serif"
  valueDisplayBg="#fffbe6"
  valueDisplayColor="#b91c1c"
  showMarkers={false}
  showLabels={false}
/>

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