Vue Bootstrap Slider
Vue Slider - Bootstrap 4 & Material Design
Vue Bootstrap slider is an interactive component that lets the user swiftly slide through possible values spread on the desired range.
Its basic implementation is quite simple and does not require big blocks of code.
Examples of Bootstrap slider use:
- Video progress bar
- Volume increase/decrease
- Enthusiasm-o-meter
See the following Bootstrap slider examples:
Info notification
If you were looking for a slider and you meant a carousel component, click here to see all the possibilities.
Default slider
Default styling for Bootstrap Slider component
Create custom <input type="range">
controls with .custom-range
. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
<template>
<div>
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
</div>
</template>
Material slider MDB Pro component
Material Design styling for Bootstrap Slider component
<template>
<mdb-range-input :min="0" :max="100" :value="50"></mdb-range-input>
</template>
<script>
import { mdbRangeInput } from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbRangeInput
}
}
</script>
Slider with different width MDB Pro component
<template>
<div>
<mdb-range-input wrapperClass="my-4 w-25" :min="0" :max="100" :value="50" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
<mdb-range-input wrapperClass="my-4 w-50" :min="0" :max="100" :value="50" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
<mdb-range-input wrapperClass="my-4 w-75" :min="0" :max="100" :value="50" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
<mdb-range-input wrapperClass="my-4 w-100" :min="0" :max="100" :value="50" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
</div>
</template>
<script>
import { mdbRangeInput } from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbRangeInput
}
}
</script>
Slider with first and last value MDB Pro component
<template>
<div>
<div class="d-flex justify-content-center my-4">
<mdb-range-input wrapperClass="my-4 w-25" :min="20" :max="50" :value="25" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
</div>
<div class="d-flex justify-content-center my-4">
<mdb-range-input wrapperClass="my-4 w-50" :min="0" :max="40" :value="40" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
</div>
<div class="d-flex justify-content-center my-4">
<mdb-range-input wrapperClass="my-4 w-75" :min="0" :max="100" :value="0" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
</div>
<div class="d-flex justify-content-center my-4">
<mdb-range-input wrapperClass="my-4 w-100" :min="40" :max="100" :value="50" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
</div>
</div>
</template>
<script>
import { mdbRangeInput } from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbRangeInput
}
}
</script>
Slider - API
In this section you will find advanced information about the Slider component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use to work with it.
Import statement
import { mdbRangeInput } from 'mdbvue';
API Reference: Properties
Name | Type | Default | Description | Example |
---|---|---|---|---|
class |
String |
|
Override or extend the styles applied to the component. | <mdb-range-input class="example-class" ... /> |
wrapperClass |
String |
|
Override or extend the styles applied to the wrapper form. | <mdb-range-input wrapperClass="example-class" ... /> |
min |
Number | 0 |
Specify the minimum slider value | <mdb-range-input :min="0" ... /> |
max |
Number | 100 |
Specify the maximum slider value | <mdb-range-input :max="100" ... /> |
value |
Number | 50 |
Specify slider value | <mdb-range-input :value="50" ... /> |
API Reference: Methods
Name | Parameters | Description | Example |
---|---|---|---|
v-on:getValue |
value | Returns input value. Use this method instead of v-model to handle input value changes. | <mdb-range-input @getValue="getRangeValue" /> |