Slider

import {Slider} from '@stroeer-labs/design-library/react';

export function SliderDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-4">
                <p className="text-xs font-medium text-muted-foreground">Variants</p>
                <div className="space-y-1.5">
                    <div className="flex items-baseline justify-between text-xs">
                        <span className="font-medium">Default</span>
                        <span className="text-muted-foreground">Adjustable value</span>
                    </div>
                    <Slider defaultValue={40} aria-label="Default — adjustable value" />
                </div>
                <div className="space-y-1.5">
                    <div className="flex items-baseline justify-between text-xs">
                        <span className="font-medium">Success</span>
                        <span className="text-muted-foreground">Within target</span>
                    </div>
                    <Slider variant="success" defaultValue={100} aria-label="Success — within target" />
                </div>
                <div className="space-y-1.5">
                    <div className="flex items-baseline justify-between text-xs">
                        <span className="font-medium">Warning</span>
                        <span className="text-muted-foreground">Approaching a limit</span>
                    </div>
                    <Slider variant="warning" defaultValue={70} aria-label="Warning — approaching a limit" />
                </div>
                <div className="space-y-1.5">
                    <div className="flex items-baseline justify-between text-xs">
                        <span className="font-medium">Destructive</span>
                        <span className="text-muted-foreground">Over limit</span>
                    </div>
                    <Slider variant="destructive" defaultValue={90} aria-label="Destructive — over limit" />
                </div>
            </div>
            <div className="space-y-3">
                <p className="text-xs font-medium text-muted-foreground">Values</p>
                <Slider defaultValue={25} aria-label="25 percent" />
                <Slider defaultValue={50} aria-label="50 percent" />
                <Slider defaultValue={75} aria-label="75 percent" />
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Range (two thumbs)</p>
                <Slider defaultValue={[25, 60]} aria-label="Range" />
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Disabled</p>
                <Slider defaultValue={50} disabled aria-label="Disabled" />
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">App-injected gradient (indicatorClassName)</p>
                {/* App-owned gradient: its meaning is the app's, so it rides the passthrough rather
                    than being a library variant — composed here from semantic tokens. */}
                <Slider defaultValue={80} indicatorClassName="bg-linear-to-r from-attention to-brand-interactive" aria-label="Gradient" />
            </div>
        </div>
    );
}

import '@angular/compiler';
import {Component, signal} from '@angular/core';
import {HlmSliderImports} from '@stroeer-labs/design-library/angular';

@Component({
    selector: 'dl-slider-demo',
    standalone: true,
    imports: [HlmSliderImports],
    template: `
    <div class="space-y-6">
      <div class="space-y-4">
        <p class="text-xs font-medium text-muted-foreground">Variants</p>
        <div class="space-y-1.5">
          <div class="flex items-baseline justify-between text-xs">
            <span class="font-medium">Default</span>
            <span class="text-muted-foreground">Adjustable value</span>
          </div>
          <hlm-slider [(value)]="valueDefault" aria-label="Default — adjustable value" />
        </div>
        <div class="space-y-1.5">
          <div class="flex items-baseline justify-between text-xs">
            <span class="font-medium">Success</span>
            <span class="text-muted-foreground">Within target</span>
          </div>
          <hlm-slider [(value)]="valueSuccess" variant="success" aria-label="Success — within target" />
        </div>
        <div class="space-y-1.5">
          <div class="flex items-baseline justify-between text-xs">
            <span class="font-medium">Warning</span>
            <span class="text-muted-foreground">Approaching a limit</span>
          </div>
          <hlm-slider [(value)]="valueWarning" variant="warning" aria-label="Warning — approaching a limit" />
        </div>
        <div class="space-y-1.5">
          <div class="flex items-baseline justify-between text-xs">
            <span class="font-medium">Destructive</span>
            <span class="text-muted-foreground">Over limit</span>
          </div>
          <hlm-slider [(value)]="valueDestructive" variant="destructive" aria-label="Destructive — over limit" />
        </div>
      </div>
      <div class="space-y-3">
        <p class="text-xs font-medium text-muted-foreground">Values</p>
        <hlm-slider [(value)]="value25" aria-label="25 percent" />
        <hlm-slider [(value)]="value50" aria-label="50 percent" />
        <hlm-slider [(value)]="value75" aria-label="75 percent" />
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Range (two thumbs)</p>
        <hlm-slider [(value)]="valueRange" aria-label="Range" />
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Disabled</p>
        <hlm-slider [(value)]="valueDisabled" [disabled]="true" aria-label="Disabled" />
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">App-injected gradient (indicatorClass)</p>
        <!-- App-owned gradient: its meaning is the app's, so it rides the passthrough rather than being
             a library variant — composed from semantic tokens. Mirrors the React slider demo exactly. -->
        <hlm-slider [(value)]="valueGradient" indicatorClass="bg-linear-to-r from-attention to-brand-interactive" aria-label="Gradient" />
      </div>
    </div>
  `,
})
export class SliderDemoComponent {
    protected readonly valueDefault = signal([40]);
    protected readonly valueSuccess = signal([100]);
    protected readonly valueWarning = signal([70]);
    protected readonly valueDestructive = signal([90]);
    protected readonly value25 = signal([25]);
    protected readonly value50 = signal([50]);
    protected readonly value75 = signal([75]);
    protected readonly valueRange = signal([25, 60]);
    protected readonly valueDisabled = signal([50]);
    protected readonly valueGradient = signal([80]);
}