SimpleSlider

import SimpleSlider from "@wikicasa-dev/components/UIKit/Slider/SimpleSlider";

A minimal horizontal slider for picking one number: a 4px track, a primary-colored fill and a round 20px thumb you drag. Use it for one value such as a search radius or a budget cap. For a min–max range with number inputs, use BaseSlider.

The value is snapped to step, clamped to min–max and rounded to an integer. logarithmic spreads a wide range (e.g. 10.000–2.000.000 €) so small values get more room.

#Usage

<script setup lang="ts">
import { ref } from "vue";
import SimpleSlider from "@wikicasa-dev/components/UIKit/Slider/SimpleSlider";

const radius = ref(2000); // metres
</script>

<template>
  <div class="radius">
    <p>Cerca entro {{ radius / 1000 }} km</p>
    <SimpleSlider v-model="radius" :min="1000" :max="5000" :step="1000" />
  </div>
</template>

#Do / Don't

• Do show the current value in a visible label next to the slider; the slider shows no value itself.
• Do initialize the v-model with a value inside min–max: an out-of-range or off-step value is corrected and written back immediately.
• Don't use it for decimals: values are rounded to whole numbers (a step of 0.5 doesn't work).
• Don't use logarithmic with min 0 (the default); a logarithmic scale needs min > 0.
• Interaction is drag-only (mouse or touch on the thumb): clicking the track and arrow keys do nothing. If keyboard access matters, pair it with a number input bound to the same value.
• id, class and other attributes go on an outer wrapper <div>, not on the role="slider" element, so a <label for> or aria-label can't name the slider. The track has 20px margin above and below.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
min	number	0
max	number	100
step	number	1
dataCy	string
logarithmic	boolean	false
modelValue	Optional<number>	0

Events

Name	Payload
update:modelValue	[value: Optional<number>]

v-model

• v-model binds modelValue (Optional<number>)

Slots

None.

Exposed (template ref)

None.