Slider

<script lang="ts">
  import 'portal-bits/styles.css';
  import 'portal-bits/tokens.css';
  import type { Snippet } from 'svelte';

  let { children }: { children: Snippet } = $props();
</script>

{@render children()}

<script lang="ts">
  import SliderExample from './SliderExample.svelte';
</script>

<SliderExample step={1} disabled={false} />

<script lang="ts">
  import { Slider } from 'portal-bits';
  let { disabled = false, step = 1 }: { disabled?: boolean; step?: number } = $props();
  let volume = $state(40);
</script>

<div class="field">
  <Slider
    label="Preview volume"
    bind:value={volume}
    {step}
    {disabled}
    format={(value) => `${value}%`}
  />
</div>

<style>
  .field {
    width: 320px;
    max-width: 100%;
  }
</style>