<script type="module" src="@arclux/arc-ui"></script>

<!-- Basic labeled slider -->
<arc-slider label="Volume" value="50" min="0" max="100"></arc-slider>

<!-- Fine-grained step for opacity -->
<arc-slider label="Opacity" value="0.8" min="0" max="1" step="0.01"></arc-slider>

<!-- Temperature range -->
<arc-slider label="Color Temperature" value="4500" min="2700" max="6500" step="100"></arc-slider>

<!-- Disabled state -->
<arc-slider label="Locked" value="30" disabled></arc-slider>

<script>
  const slider = document.querySelector('arc-slider');

  // Real-time preview while dragging
  slider.addEventListener('arc-input', (e) => {
    document.body.style.opacity = e.detail.value / 100;
  });

  // Commit final value on release
  slider.addEventListener('arc-change', (e) => {
    console.log('Final value:', e.detail.value);
  });
</script>

import { Slider } from '@arclux/arc-ui-react';
import { useState } from 'react';

function VolumeControl() {
  const [volume, setVolume] = useState(50);

  return (
    <Slider
      label="Volume"
      value={volume}
      min={0}
      max={100}
      onArcInput={(e) => setVolume(e.detail.value)}
      onArcChange={(e) => saveVolume(e.detail.value)}
    />
  );
}

function ImageEditor() {
  const [opacity, setOpacity] = useState(1);
  const [blur, setBlur] = useState(0);
  const [brightness, setBrightness] = useState(100);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 400 }}>
      <Slider label="Opacity" value={opacity} min={0} max={1} step={0.01}
        onArcInput={(e) => setOpacity(e.detail.value)} />
      <Slider label="Blur" value={blur} min={0} max={20} step={0.5}
        onArcInput={(e) => setBlur(e.detail.value)} />
      <Slider label="Brightness" value={brightness} min={0} max={200}
        onArcInput={(e) => setBrightness(e.detail.value)} />
    </div>
  );
}

<script setup>
import { Slider } from '@arclux/arc-ui-vue';
import { ref } from 'vue';

const fontSize = ref(16);
const lineHeight = ref(1.5);
const letterSpacing = ref(0);
</script>

<template>
  <div style="display:flex; flex-direction:column; gap:16px; max-width:400px;">
    <Slider label="Font Size" :value="fontSize" :min="10" :max="48"
      @arc-input="fontSize = $event.detail.value" />
    <Slider label="Line Height" :value="lineHeight" :min="1" :max="3" :step="0.1"
      @arc-input="lineHeight = $event.detail.value" />
    <Slider label="Letter Spacing" :value="letterSpacing" :min="-2" :max="10" :step="0.5"
      @arc-input="letterSpacing = $event.detail.value" />
  </div>

  <p :style="{ fontSize: fontSize + 'px', lineHeight, letterSpacing: letterSpacing + 'px' }">
    Preview text with live adjustments.
  </p>
</template>

<script>
  import { Slider } from '@arclux/arc-ui-svelte';

  let hue = 220;
  let saturation = 70;
  let lightness = 50;

  $: color = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
</script>

<div style="display:flex; flex-direction:column; gap:16px; max-width:400px;">
  <Slider label="Hue" value={hue} min={0} max={360}
    on:arc-input={(e) => hue = e.detail.value} />
  <Slider label="Saturation" value={saturation} min={0} max={100}
    on:arc-input={(e) => saturation = e.detail.value} />
  <Slider label="Lightness" value={lightness} min={0} max={100}
    on:arc-input={(e) => lightness = e.detail.value} />
</div>

<div style="width:80px; height:80px; border-radius:12px; margin-top:16px; background:{color}"></div>

import { Component } from '@angular/core';
import { Slider } from '@arclux/arc-ui-angular';

@Component({
  imports: [Slider],
  template: `
    <div style="display:flex; flex-direction:column; gap:16px; max-width:400px;">
      <Slider label="Playback Speed" [value]="speed" [min]="0.25" [max]="3" [step]="0.25"
        (arc-input)="speed = $event.detail.value"></Slider>

      <Slider label="Seek" [value]="position" [min]="0" [max]="duration"
        (arc-input)="onSeek($event.detail.value)"
        (arc-change)="onSeekCommit($event.detail.value)"></Slider>

      <Slider label="Volume" [value]="volume" [min]="0" [max]="100"
        (arc-change)="volume = $event.detail.value"></Slider>
    </div>
  `,
})
export class MediaPlayerComponent {
  speed = 1;
  position = 0;
  duration = 240;
  volume = 75;

  onSeek(val: number) { /* live preview seek position */ }
  onSeekCommit(val: number) { /* commit seek to player */ }
}

import { Slider } from '@arclux/arc-ui-solid';
import { createSignal } from 'solid-js';

function PricingEstimator() {
  const [seats, setSeats] = createSignal(5);
  const pricePerSeat = 12;

  return (
    <div style={{ 'max-width': '400px' }}>
      <Slider
        label="Team Size"
        value={seats()}
        min={1}
        max={100}
        onArcInput={(e) => setSeats(e.detail.value)}
      />
      <p style={{ 'margin-top': '12px', 'font-size': '14px', color: 'var(--text-muted)' }}>
        {seats()} seats × ${pricePerSeat}/mo = <strong>${seats() * pricePerSeat}/mo</strong>
      </p>
    </div>
  );
}

import { Slider } from '@arclux/arc-ui-preact';
import { useState } from 'preact/hooks';

function BorderRadiusTool() {
  const [radius, setRadius] = useState(8);
  const [padding, setPadding] = useState(16);

  return (
    <div style={{ maxWidth: 400 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Slider label="Border Radius" value={radius} min={0} max={50}
          onArcInput={(e) => setRadius(e.detail.value)} />
        <Slider label="Padding" value={padding} min={0} max={64}
          onArcInput={(e) => setPadding(e.detail.value)} />
      </div>
      <div style={{
        marginTop: 24,
        borderRadius: radius,
        padding,
        background: 'var(--bg-elevated)',
        border: '1px solid var(--border-default)',
      }}>
        Preview box
      </div>
    </div>
  );
}

<!-- arc-slider is interactive — requires JS -->
<arc-slider></arc-slider>

<!-- arc-slider is interactive — requires JS -->
<arc-slider></arc-slider>