---

title: BaseSlider

---

# BaseSlider

This component implements a range slider and prints the selected values.
It receives a threshold prop to set the limits and uses v-model to get and set
the selected values.

It makes use of the nouslider library @see https://refreshless.com/nouislider/
for the slider implementation.

## Props

| Name                      | Description                                                 | Type                                      | Default                                                       |
| ------------------------- | ----------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------- |
| <code>threshold</code>    | The threshold prop sets the limits for the slider.          | <code>{ min: number; max: number }</code> | <code>() => ({ min: 0, max: Number.MAX_SAFE_INTEGER })</code> |
| <code>modelValue</code>   | The modelValue prop sets the initial values for the slider. | <code>{ min: number; max: number }</code> | <code></code>                                                 |
| <code>contentClass</code> | Class to be able to customize slider styles.                | <code>string</code>                       | <code>''</code>                                               |

## Events

| Event name        | Properties | Description |
| ----------------- | ---------- | ----------- |
| update:modelValue |            |

## Slots

| Name                 | Description                                                                       | Bindings<br />(name - type - description) |
| -------------------- | --------------------------------------------------------------------------------- | ----------------------------------------- |
| <code>default</code> | Default selected range rendering. This slot will be used by default for rendering |                                           |

## Examples

This component renders a slider and the selected values. The component needs the threshold for the
slider, although is not required (If not passed, fallback is min: 0, max: Number.MAX_SAFE_INTEGER ),
which are passed using the `threshold` prop and the selected range, which is passed in using the
v-model.

### Default usage

It is required to send the value prop which holds the selected values.

```vue live
<template>
  <BaseSlider v-model="selectedRange" />
</template>

<script setup>
import { BaseSlider } from "@empathyco/x-components";
import { ref } from "vue";
const selectedRange = ref({ min: 0, max: 1000 });
</script>
```

#### With threshold

```vue live
<template>
  <BaseSlider v-model="selectedRange" :threshold="threshold" />
</template>

<script setup>
import { BaseSlider } from "@empathyco/x-components";
import { ref } from "vue";
const threshold = { min: 0, max: 1000 };
const selectedRange = ref({ ...threshold });
</script>
```

### Customized usage

#### Overriding the slots

It is possible to override the default slot to customize the layout for the selected values.

```vue live
<template>
  <BaseSlider
    v-model="selectedRange"
    :threshold="threshold"
    v-slot="{ rangeSelected }"
  >
    <p class="x-base-slider__selected-min">
      <span>min value</span>
      <span>
        {{ rangeSelected[0] }}
      </span>
    </p>
    <p class="x-base-slider__selected-max">
      <span>max value</span>
      <span>
        {{ rangeSelected[1] }}
      </span>
    </p>
  </BaseSlider>
</template>

<script setup>
import { BaseSlider } from "@empathyco/x-components";
import { ref } from "vue";
const threshold = { min: 0, max: 1000 };
const selectedRange = ref({ ...threshold });
</script>
```

It is also possible to add inputs to complement the slider and allow to change the selected values
manually.

```vue live
<template>
  <BaseSlider v-model="selectedRange" :threshold="threshold">
    <input
      @change="selectedRange.min = $event.target?.valueAsNumber || 0"
      class="xds:input"
      name="min"
      type="number"
      :value="selectedRange.min"
      :aria-label="'min'"
    />

    <input
      @change="selectedRange.max = $event.target?.valueAsNumber || 1000000"
      style="display: block"
      class="xds:input"
      name="max"
      type="number"
      :value="selectedRange.max"
      :aria-label="'max'"
    />
  </BaseSlider>
</template>

<script setup>
import { BaseSlider } from "@empathyco/x-components";
import { ref } from "vue";
const threshold = { min: 0, max: 1000 };
const selectedRange = ref({ ...threshold });
</script>
```