Ermine UI

Slider

Pick a number by dragging. A native range input, restyled, so the keyboard and forms just work.

See it liveSource on GitHub

Install

If this is the first component in the project, set up once. This writes ermine.json and copies the theme stylesheet. The installation guide covers Vue, Nuxt and Astro.

npx ermineui init
pnpm dlx ermineui init
yarn dlx ermineui init
bunx ermineui init

Then add the component:

npx ermineui add slider
pnpm dlx ermineui add slider
yarn dlx ermineui add slider
bunx ermineui add slider

That copies 2 files into src/components/ui/slider/. Files you already have are kept.

Use

import { Slider } from '@/components/ui/slider'
<Pagination v-model="page" :page-count="24" />

<Breadcrumb>
  <BreadcrumbItem href="/projects">Projects</BreadcrumbItem>
  <BreadcrumbItem :as="NuxtLink" to="/projects/storefront">Storefront</BreadcrumbItem>
  <BreadcrumbItem current>Deployments</BreadcrumbItem>
</Breadcrumb>

<Slider v-model="memory" :min="128" :max="3008" :step="64" />

<ToggleGroup v-model="period" aria-label="Period">  <!-- type="multiple" takes an array -->
  <ToggleGroupItem value="7d">7 days</ToggleGroupItem>
  <ToggleGroupItem value="30d">30 days</ToggleGroupItem>
</ToggleGroup>

In Nuxt, with the auto-import setting, the tags work in templates without the import. In Astro, use it inside a Vue island.

What gets copied

FileWhere it goes
Slider.vuesrc/components/ui/slider/Slider.vue
index.tssrc/components/ui/slider/index.ts

The folders are the suggested ones. ermine.json says where yours are.

Source

This is exactly what the command copies. To install by hand, create each file below and the helpers listed above.

Slider.vue 98 lines
<script setup lang="ts">
import { computed } from 'vue'

const props = withDefaults(
  defineProps<{
    min?: number
    max?: number
    step?: number
  }>(),
  { min: 0, max: 100, step: 1 },
)

const model = defineModel<number>({ default: 0 })

/** How far along the track the thumb is, for the filled part. */
const fill = computed(() => {
  const span = props.max - props.min
  return span > 0 ? `${Math.max(0, Math.min(((model.value - props.min) / span) * 100, 100))}%` : '0%'
})
</script>

<template>
  <input v-model.number="model" type="range" class="er-slider" :min="min" :max="max" :step="step" :style="{ '--er-slider-fill': fill }" />
</template>

<style>
@layer components {
  /* A real range input, restyled — so arrow keys, Home / End, touch and forms all work as usual. */
  .er-slider {
    --er-slider-track: color-mix(in oklab, var(--er-primary) 15%, transparent);
    appearance: none;
    display: block;
    width: 100%;
    height: 1rem;
    margin: 0;
    background: transparent;
    cursor: pointer;
  }

  .er-slider::-webkit-slider-runnable-track {
    height: 0.375rem;
    border-radius: 999px;
    background: linear-gradient(to right, var(--er-primary) var(--er-slider-fill), var(--er-slider-track) var(--er-slider-fill));
  }

  .er-slider::-moz-range-track {
    height: 0.375rem;
    border-radius: 999px;
    background: var(--er-slider-track);
  }

  .er-slider::-moz-range-progress {
    height: 0.375rem;
    border-radius: 999px;
    background: var(--er-primary);
  }

  .er-slider::-webkit-slider-thumb {
    appearance: none;
    width: 1rem;
    height: 1rem;
    margin-top: -0.3125rem;
    border: 1px solid var(--er-primary);
    border-radius: 50%;
    background: var(--er-background);
    box-shadow: var(--er-shadow-sm);
    transition: box-shadow var(--er-duration);
  }

  .er-slider::-moz-range-thumb {
    box-sizing: border-box;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--er-primary);
    border-radius: 50%;
    background: var(--er-background);
    box-shadow: var(--er-shadow-sm);
  }

  .er-slider:focus-visible {
    outline: none;
  }

  .er-slider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--er-ring) 35%, transparent);
  }

  .er-slider:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--er-ring) 35%, transparent);
  }

  .er-slider:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}
</style>
index.ts 3 lines
/** Slider — pick a number by dragging. A native range input, restyled, so the keyboard and forms just work. */
export { default as Slider } from './Slider.vue'