@empathyco/x-components/docs/API-reference/components/common/x-components.base-slider.md

Empathy X Components

---

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>
import { BaseSlider } from '@empathyco/x-components'

export default {
  name: 'BaseSliderDemo',
  components: {
    BaseSlider,
  },
  setup() {
    const selectedRange = ref({ min: 0, max: 1000 })

    return {
      selectedRange,
    }
  },
}
</script>
```

#### With threshold

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

<script>
import { BaseSlider } from '@empathyco/x-components'

export default {
  name: 'BaseSliderDemo',
  components: {
    BaseSliderDemo,
  },
  setup() {
    const threshold = ref({ min: 0, max: 1000 })
    const selectedRange = ref(threshold.value)

    return {
      selectedRange,
      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>
import { BaseSlider } from '@empathyco/x-components'

export default {
  name: 'BaseSliderDemo',
  components: {
    BaseSliderDemo,
  },
  setup() {
    const threshold = ref({ min: 0, max: 1000 })
    const selectedRange = ref(threshold.value)

    return {
      selectedRange,
      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="x-input"
      name="min"
      type="number"
      :value="selectedRange.min"
      :aria-label="'min'"
    />

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

<script>
import { BaseSlider } from '@empathyco/x-components'

export default {
  name: 'BaseSliderDemo',
  components: {
    BaseSliderDemo,
  },
  setup() {
    const threshold = ref({ min: 0, max: 1000 })
    const selectedRange = ref(threshold.value)

    return {
      selectedRange,
      threshold,
    }
  },
}
</script>
```