UI Development with Chakra UI Vue — Slider

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Slider

We can add a slider with the c-slider component.

For instance, we can write:

<template>
  <c-box>
    <c-slider :max="20" @change="handleChange" :value="value">
      <c-slider-track />
      <c-slider-filled-track />
      <c-slider-thumb />
    </c-slider>
  </c-box>
</template>

<script>
import {
  CBox,
  CSlider,
  CSliderTrack,
  CSliderThumb,
  CSliderFilledTrack,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CSlider,
    CSliderTrack,
    CSliderThumb,
    CSliderFilledTrack,
  },
  data() {
    return {
      value: 15,
    };
  },
  methods: {
    handleChange(val) {
      this.value = val;
    },
  },
};
</script>

We set the value prop to set its value.

The max prop set the max allowed value.

@change is set to a function that updates the value .

c-slider-track has the empty part of the slider track.

c-slider-filled-track has the filled part of the slider track.

c-slider-thumb has the slider button.

We can change the slider color with the color prop:

<template>
  <c-box>
    <c-slider color="pink" :max="20" @change="handleChange" :value="value">
      <c-slider-track />
      <c-slider-filled-track />
      <c-slider-thumb />
    </c-slider>
  </c-box>
</template>

<script>
import {
  CBox,
  CSlider,
  CSliderTrack,
  CSliderThumb,
  CSliderFilledTrack,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CSlider,
    CSliderTrack,
    CSliderThumb,
    CSliderFilledTrack,
  },
  data() {
    return {
      value: 15,
    };
  },
  methods: {
    handleChange(val) {
      this.value = val;
    },
  },
};
</script>

Conclusion

We can add a slider into our Vue app with Chakra UI Vue.