round-range-slider

Circular range slider built with vanilla JavaScript. No dependencies.

Features

• Zero dependencies
• ES Modules, tree-shakeable
• ~15KB minified
• SVG rendering
• Touch support
• Keyboard navigation & ARIA
• Multiple shapes: full, half, quarter, pie
• Customizable colors and sizes

Installation

npm install round-range-slider

Or include directly:

<link rel="stylesheet" href="round-range-slider.css">
<script type="module">
  import RoundRangeSlider from './round-range-slider.es.js';
</script>

Quick Start

<div id="slider"></div>

<script type="module">
  import RoundRangeSlider from 'round-range-slider';
  import 'round-range-slider/style.css';
  
  const slider = new RoundRangeSlider('#slider', {
    min: 0,
    max: 100,
    value: 50
  });
</script>

Examples

// Basic slider
new RoundRangeSlider('#slider', {
  sliderType: 'min-range',
  value: 30
});

// Two handles (range)
new RoundRangeSlider('#slider', {
  sliderType: 'range',
  value: '25,75'
});

// Half circle
new RoundRangeSlider('#slider', {
  circleShape: 'half-top',
  value: 50
});

// Custom colors
new RoundRangeSlider('#slider', {
  pathColor: '#eee',
  rangeColor: '#ff6b6b',
  borderColor: '#333'
});

API

const slider = new RoundRangeSlider('#slider', options);

// Value
slider.getValue();
slider.setValue(50);

// Options
slider.get('radius');
slider.set('radius', 100);
slider.set({ radius: 100, width: 20 });

// Control
slider.disable();
slider.enable();
slider.destroy();

// Get instance
RoundRangeSlider.getInstance('#slider');

Events

const slider = new RoundRangeSlider('#slider', {
  change: (e) => console.log('Changed:', e.value),
  drag: (e) => console.log('Dragging:', e.value)
});

// Or via addEventListener
slider.control.addEventListener('change', (e) => {
  console.log(e.detail.value);
});

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | min | number | 0 | Minimum value | | max | number | 100 | Maximum value | | step | number | 1 | Step increment | | value | number/string | null | Initial value. For range: "25,75" | | radius | number | 85 | Radius in px | | width | number | 18 | Path width | | sliderType | string | "min-range" | "default", "min-range", "range" | | circleShape | string | "full" | Shape: "full", "half-top", "half-bottom", "half-left", "half-right", "quarter-*", "pie" | | startAngle | number | 0 | Start angle (0-360) | | endAngle | string | "+360" | End angle | | animation | boolean | true | Enable animation | | showTooltip | boolean | true | Show tooltip | | editableTooltip | boolean | true | Editable tooltip | | readOnly | boolean | false | Read-only mode | | disabled | boolean | false | Disabled state | | keyboardAction | boolean | true | Keyboard control | | mouseScrollAction | boolean | false | Mouse wheel control | | lineCap | string | "butt" | Line cap: "butt", "round", "square" | | handleShape | string | "round" | Handle shape: "round", "square", "dot" |

Colors

| Option | Default | Description | |--------|---------|-------------| | borderWidth | 1 | Border width | | borderColor | "#AAA" | Border color | | pathColor | "#FFF" | Path color | | rangeColor | "#54BBE0" | Range color | | handleColor | null | Handle color | | tooltipColor | null | Tooltip color |

Events

| Event | Description | |-------|-------------| | create | After creation | | start | Drag started | | drag | During drag | | change | Value changed | | stop | Drag ended | | valueChange | Any value change | | beforeValueChange | Before change (cancelable) | | tooltipFormat | Custom tooltip format |

Browser Support

Chrome, Firefox, Safari, Edge (last 2 versions).

License

MIT © Alex Lenk