Skip to content

Commit 59b78ce

Browse files
mrholekmrholek
committed
Merge remote-tracking branch 'origin/feat-range-slider'
2 parents 0d40fa0 + 084dce0 commit 59b78ce

File tree

10 files changed

+1654
-0
lines changed

10 files changed

+1654
-0
lines changed

‎docs/assets/js/snippets.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable complexity */
12
// NOTICE!!! Initially embedded in our docs this JavaScript
23
// file contains elements that can help you create reproducible
34
// use cases in StackBlitz for instance.
@@ -392,6 +393,73 @@
392393
}
393394
// js-docs-end date-range-picker-custom-ranges
394395

396+
// js-docs-start range-slider-custom-labels
397+
const myRangeSliderCustomLabels = document.getElementById('myRangeSliderCustomLabels')
398+
if (myRangeSliderCustomLabels) {
399+
const optionsRangeSliderCustomLabels = {
400+
min: -50,
401+
max: 100,
402+
labels: [
403+
{
404+
value: -50,
405+
label: '-50°C',
406+
class: 'text-info'
407+
},
408+
{
409+
value: 0,
410+
label: '0°C',
411+
style: {
412+
fontWeight: 'bold'
413+
}
414+
},
415+
{
416+
value: 20,
417+
label: '20°C',
418+
class: ['text-warning']
419+
},
420+
{
421+
value: 100,
422+
label: '100°C',
423+
class: 'text-danger'
424+
}
425+
],
426+
tooltipsFormat: value => `${value}°C`,
427+
value: [-10, 40]
428+
}
429+
new coreui.RangeSlider(myRangeSliderCustomLabels, optionsRangeSliderCustomLabels)
430+
}
431+
// js-docs-end range-slider-custom-labels
432+
433+
// js-docs-start range-slider-custom-tooltips
434+
const myRangeSliderCustomTooltips = document.getElementById('myRangeSliderCustomTooltips')
435+
if (myRangeSliderCustomTooltips) {
436+
const optionsRangeSliderCustomTooltips = {
437+
max: 1000,
438+
labels: [
439+
{
440+
value: 0,
441+
label: '$0'
442+
},
443+
{
444+
value: 250,
445+
label: '$250'
446+
},
447+
{
448+
value: 500,
449+
label: '$500'
450+
},
451+
{
452+
value: 1000,
453+
label: '$1000'
454+
}
455+
],
456+
tooltipsFormat: value => `$${value}`,
457+
value: [100, 350]
458+
}
459+
new coreui.RangeSlider(myRangeSliderCustomTooltips, optionsRangeSliderCustomTooltips)
460+
}
461+
// js-docs-end range-slider-custom-tooltips
462+
395463
// js-docs-start rating-custom-icons1
396464
const myRatingCustomIcons1 = document.getElementById('myRatingCustomIcons1')
397465
if (myRatingCustomIcons1) {

‎docs/content/forms/range-slider.md

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
---
2+
layout: docs
3+
title: Range Slider
4+
description: Enhance your forms with our customizable Bootstrap 5 Range Slider component for advanced range selection.
5+
group: forms
6+
toc: true
7+
bootstrap: true
8+
---
9+
10+
## Overview
11+
12+
The **Bootstrap 5 Range Slider** component allows users to select a value or range of values within a predefined range. Unlike the standard `<input type="range">`, the Range Slider offers enhanced customization options, including multiple handles, labels, tooltips, and vertical orientation. It ensures consistent styling across browsers and provides a rich set of features for advanced use cases.
13+
14+
{{< example >}}
15+
<div data-coreui-toggle="range-slider"
16+
data-coreui-value="25,75"
17+
data-coreui-labels="Low, Medium, High">
18+
</div>
19+
{{< /example >}}
20+
21+
## Features
22+
23+
- **Multiple Handles:** Select single or multiple values within the range.
24+
- **Custom Labels:** Display labels at specific points on the slider.
25+
- **Tooltips:** Show dynamic tooltips displaying current values.
26+
- **Vertical Orientation:** Rotate the slider for vertical layouts.
27+
- **Clickable Labels:** Enable users to click on labels to set slider values.
28+
- **Disabled State:** Disable the slider to prevent user interaction.
29+
30+
## Basic Range Slider
31+
32+
Create a simple range slider with default settings.
33+
34+
{{< example >}}
35+
<div data-coreui-toggle="range-slider" data-coreui-value="50"></div>
36+
{{< /example >}}
37+
38+
## Multiple handles
39+
40+
Enable multiple handles to allow the selection of a range or/and multiple values.
41+
42+
{{< example >}}
43+
<div data-coreui-toggle="range-slider" data-coreui-value="20,40"></div>
44+
<div data-coreui-toggle="range-slider" data-coreui-value="20,40,60"></div>
45+
<div data-coreui-toggle="range-slider" data-coreui-value="20,40,60,80"></div>
46+
{{< /example >}}
47+
48+
## Vertical Range Slider
49+
50+
Rotate the slider to a vertical orientation.
51+
52+
{{< example >}}
53+
<div class="d-flex">
54+
<div data-coreui-toggle="range-slider" data-coreui-value="20" data-coreui-vertical="true"></div>
55+
<div data-coreui-toggle="range-slider" data-coreui-value="20,80" data-coreui-vertical="true"></div>
56+
</div>
57+
{{< /example >}}
58+
59+
## Disabled
60+
61+
Disable the slider to prevent user interaction.
62+
63+
{{< example >}}
64+
<div data-coreui-toggle="range-slider" data-coreui-value="50" data-coreui-disabled="true"></div>
65+
<div data-coreui-toggle="range-slider" data-coreui-value="50, 75" data-coreui-disabled="true"></div>
66+
{{< /example >}}
67+
68+
## Min and max
69+
70+
Range Slider has implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.
71+
72+
{{< example >}}
73+
<div data-coreui-toggle="range-slider" data-coreui-min="-50" data-coreui-max="150" data-coreui-value="50"></div>
74+
<div data-coreui-toggle="range-slider" data-coreui-min="-50" data-coreui-max="150" data-coreui-value="50, 75"></div>
75+
{{< /example >}}
76+
77+
## Steps
78+
79+
Range Slider inputs automatically "snap" to whole numbers. To modify this behavior, set a `step` value. In the example below, we increase the number of steps by specifying `step="0.25"`.
80+
81+
{{< example >}}
82+
<div data-coreui-toggle="range-slider" data-coreui-step="0.25" data-coreui-value="50" ></div>
83+
<div data-coreui-toggle="range-slider" data-coreui-step="0.25" data-coreui-value="50, 75"></div>
84+
{{< /example >}}
85+
86+
## Distance
87+
88+
Sets the minimum distance between multiple slider handles by setting `distance` and ensures that the handles do not overlap or get too close.
89+
90+
{{< example >}}
91+
<div data-coreui-toggle="range-slider" data-coreui-distance="10" data-coreui-value="50, 75"></div>
92+
{{< /example >}}
93+
94+
## Labels
95+
96+
Add labels to specific points on the slider for better context. If you provide an array of strings, as in the example below, then labels will be spaced at equal distances from the beginning to the end of the slider.
97+
98+
{{< example >}}
99+
<div data-coreui-toggle="range-slider" data-coreui-value="30,70" data-coreui-labels="Start, Middle, End"></div>
100+
{{< /example >}}
101+
102+
### Labels customization
103+
104+
Labels can be configured as an array of strings or objects. When using objects, you can specify additional properties like `value`, `label`, `class`, and `style`.
105+
106+
{{< example >}}
107+
<div id="myRangeSliderCustomLabels"></div>
108+
{{< /example >}}
109+
110+
{{< js-docs name="range-slider-custom-labels" file="docs/assets/js/snippets.js" >}}
111+
112+
### Clickable labels
113+
114+
By default, users can click on labels to set the slider to specific values. You can disable this feature by setting `clickableLabels` to `false`.
115+
116+
{{< example >}}
117+
<div data-coreui-toggle="range-slider" data-coreui-clickable-labels="false" data-coreui-value="20,80" data-coreui-labels="Low,Medium,High"></div>
118+
{{< /example >}}
119+
120+
## Tooltips
121+
122+
By default, tooltips display the current value of each handle. You can disable tooltips by setting `tooltips` to `false`
123+
124+
{{< example >}}
125+
<div data-coreui-toggle="range-slider" data-coreui-value="40,60" data-coreui-tooltips="false"></div>
126+
{{< /example >}}
127+
128+
### Tooltips formatting
129+
130+
Customize the content of tooltips using the `tooltipsFormat` option. This can be a function that formats the tooltip text based on the current value.
131+
132+
{{< example >}}
133+
<div id="myRangeSliderCustomTooltips"></div>
134+
{{< /example >}}
135+
136+
{{< js-docs name="range-slider-custom-tooltips" file="docs/assets/js/snippets.js" >}}
137+
138+
## Usage
139+
140+
### Via data attributes
141+
142+
{{< bootstrap-compatibility >}}
143+
144+
Add `data-coreui-toggle="range-slider"` to a `div` element.
145+
146+
```html
147+
<div data-coreui-toggle="range-slider" data-coreui-value="50">
148+
</div>
149+
```
150+
151+
### Via JavaScript
152+
153+
Call the Range Slider component via JavaScript:
154+
155+
```html
156+
<div id="myRangeSlider"></div>
157+
```
158+
159+
```js
160+
const rangeSliderElement = document.getElementById('myRangeSlider')
161+
const rangeSlider = new RangeSlider(rangeSliderElement, {
162+
min: 0,
163+
max: 100,
164+
step: 1,
165+
distance: 10,
166+
value: [20, 80],
167+
labels: ['Low', 'Medium', 'High'],
168+
clickableLabels: true,
169+
tooltips: true,
170+
tooltipsFormat: value => `$${value}`
171+
})
172+
```
173+
174+
### Options
175+
176+
{{< markdown >}}
177+
{{< partial "js-data-attributes.md" >}}
178+
{{< /markdown >}}
179+
180+
181+
{{< bs-table >}}
182+
| Name | Type | Default | Description |
183+
| --- | --- | --- | --- |
184+
| `clickableLabels` | boolean | `true` | Enables or disables the ability to click on labels to set slider values. |
185+
| `disabled` | boolean | `false` | Disables the slider, making it non-interactive and grayed out. |
186+
| `distance` | number | `0` | Sets the minimum distance between multiple slider handles. |
187+
| `labels` | array, boolean, string | `false` | Adds labels to the slider. Can be an array of label objects, a comma-separated string, or false.|
188+
| `max` | number | `100` | Defines the maximum value of the slider. |
189+
| `min` | number | `0` | Defines the minimum value of the slider. |
190+
| `name` | array, string, null | `null` | Sets the name attribute for each slider input. |
191+
| `step` | number, string | `1` | Specifies the increment step for slider values. |
192+
| `tooltips` | boolean | `true` | Enables or disables tooltips that display current slider values. |
193+
| `tooltipsFormat` | function, null | `null` | Provides a custom formatting function for tooltip values. |
194+
| `value` | array, number | `0` | Sets the initial value(s) of the slider. |
195+
| `vertical` | boolean | `false` | Rotates the slider to a vertical orientation. |
196+
{{< /bs-table >}}
197+
198+
199+
### Methods
200+
201+
{{< bs-table >}}
202+
| Method | Description |
203+
| --- | --- |
204+
| `update` | Updates the configuration of the Range Slider Component. |
205+
| `dispose` | Destroys a component. (Removes stored data on the DOM element) |
206+
| `getInstance` | Static method which allows you to get the Range Slider instance associated to a DOM element, you can use it like this: `coreui.RangeSlider.getInstance(element)` |
207+
| `getOrCreateInstance` | Static method which returns a Range Slider instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `coreui.Rating.getOrCreateInstance(element)` |
208+
{{< /bs-table >}}
209+
210+
### Events
211+
212+
{{< bs-table >}}
213+
| Method | Description |
214+
| --- | --- |
215+
| `change.coreui.range-slider` | Fired when the slider value changes. |
216+
{{< /bs-table >}}
217+
218+
```js
219+
const myRangeSlider = document.getElementById('myRangeSlider')
220+
myRangeSlider.addEventListener('change.coreui.range-slider', event => {
221+
// do something...
222+
})
223+
```
224+
225+
## Customizing
226+
227+
### CSS variables
228+
229+
Bootstap Range Sliders use local CSS variables on `.range-slider` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
230+
231+
{{< scss-docs name="range-slider-css-vars" file="scss/_range-slider.scss" >}}
232+
233+
{{< scss-docs name="range-slider-vertical-css-vars" file="scss/_range-slider.scss" >}}
234+
235+
### SASS variables
236+
237+
{{< scss-docs name="range-slider-variables" file="scss/_variables.scss" >}}

‎docs/data/sidebar.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,10 @@
6666
text: PRO
6767
- title: Checks & radios
6868
- title: Range
69+
- title: Range Slider
70+
badge:
71+
color: danger
72+
text: PRO
6973
- title: Input group
7074
- title: Floating labels
7175
- title: Date Picker

‎js/index.esm.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export { default as MultiSelect } from './src/multi-select.js'
1919
export { default as Navigation } from './src/navigation.js'
2020
export { default as Offcanvas } from './src/offcanvas.js'
2121
export { default as Popover } from './src/popover.js'
22+
export { default as RangeSlider } from './src/range-slider.js'
2223
export { default as Rating } from './src/rating.js'
2324
export { default as ScrollSpy } from './src/scrollspy.js'
2425
export { default as Sidebar } from './src/sidebar.js'

‎js/index.umd.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import MultiSelect from './src/multi-select.js'
1919
import Navigation from './src/navigation.js'
2020
import OffCanvas from './src/offcanvas.js'
2121
import Popover from './src/popover.js'
22+
import RangeSlider from './src/range-slider.js'
2223
import Rating from './src/rating.js'
2324
import ScrollSpy from './src/scrollspy.js'
2425
import Sidebar from './src/sidebar.js'
@@ -42,6 +43,7 @@ export default {
4243
Navigation,
4344
OffCanvas,
4445
Popover,
46+
RangeSlider,
4547
Rating,
4648
ScrollSpy,
4749
Sidebar,

0 commit comments

Comments
 (0)