BaseSlider

import BaseSlider from "@wikicasa-dev/components/UIKit/BaseSlider";

Use to pick a numeric range: price from/to, surface from/to (m²). It renders two thumbs on one track plus two BaseInput fields labelled "Min" and "Max" that stay in sync with the thumbs. For a single value use SimpleSlider.

Bind the range with v-model:min-value and v-model:max-value. min / max set the limits (default 0–100) and the native step attribute is forwarded to both thumbs. Use type="logarithmic" for wide ranges such as prices, so low values get more of the track.

#Usage

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

const surfaceFrom = ref<number>();
const surfaceTo = ref<number>();
</script>

<template>
  <BaseSlider
    v-model:min-value="surfaceFrom"
    v-model:max-value="surfaceTo"
    :min="20"
    :max="500"
    step="5"
  />
  <p>Superficie: {{ surfaceFrom }}–{{ surfaceTo }} m²</p>
</template>

#Do / Don't

• Do expect it to start at the full range: on mount it sets the models to min and max, overwriting any initial value you bound.
• Do put your own heading or legend above it ("Superficie (m²)"); the thumbs have no accessible label and the fields are always labelled "Min" / "Max".
• Don't use it for a single value; use SimpleSlider.

#Styling hooks

None. Track colors are fixed (primary for the selected range, light blue for the rest); size and spacing come from the parent container via class.

#API

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

Props

Name	Type	Default	Required	Description
type	"linear" | "logarithmic"	"linear"
min	number	0
max	number	100
minValue	Optional<number>	0
maxValue	Optional<number>	0

Events

Name	Payload
update:minValue	[value: Optional<number>]
update:maxValue	[value: Optional<number>]

v-model

• v-model:minValue (Optional<number>)
• v-model:maxValue (Optional<number>)

Slots

None.

Exposed (template ref)

None.