From 552a75b851259a1e7636686903ddea450af400fa Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Wed, 16 Nov 2022 10:32:09 +0100 Subject: [PATCH 1/5] Try it --- site/assets/scss/_component-examples.scss | 8 ++++ site/content/docs/5.2/forms/range.md | 48 ++++++++++++++++++++ site/static/docs/5.2/assets/js/form-range.js | 22 +++++++++ 3 files changed, 78 insertions(+) create mode 100644 site/static/docs/5.2/assets/js/form-range.js diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 0d8460a14df9..361d7eb60637 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -171,6 +171,14 @@ } } +.bd-example-range { + .form-range::-moz-range-track, + .form-range::-webkit-slider-runnable-track { + height: .5rem; + background-image: linear-gradient(to right, #9ec5fe 0%, #9ec5fe var(--value, 0%), #dee2e6 var(--value, 0%), #dee2e6 100%); + } +} + // Ratio helpers .bd-example-ratios { .ratio { diff --git a/site/content/docs/5.2/forms/range.md b/site/content/docs/5.2/forms/range.md index 5c4f02612d36..4d716634a925 100644 --- a/site/content/docs/5.2/forms/range.md +++ b/site/content/docs/5.2/forms/range.md @@ -4,12 +4,17 @@ title: Range description: Use our custom range inputs for consistent cross-browser styling and built-in customization. group: forms toc: true +extra_js: + - src: "/docs/5.2/assets/js/form-range.js" + async: true --- ## Overview Create custom `` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it. +However, if you really want to implement it, there's a way to do it with Javascript. Please see our [Javascript section](#via-javascript). + {{< example >}} @@ -42,6 +47,49 @@ By default, range inputs "snap" to integer values. To change this, you can speci {{< /example >}} +## Via javascript + +Range is not implemented with Javascript in Bootstrap. Here is a way to do so to have the same behavior on all supported browsers. + +Build a range input with `min` and `max` attributes. + +{{< example class="bd-example-range" >}} + + +{{< /example >}} + +The input backgrounds must be initialized in a different way. + +```css +.form-range::-moz-range-track, +.form-range::-webkit-slider-runnable-track { + height: .5rem; + background-image: linear-gradient(to right, #9ec5fe 0%, #9ec5fe var(--value, 0%), #dee2e6 var(--value, 0%), #dee2e6 100%); +} +``` + +Introduce event listeners on the input to make it dynamic. + +```js +// Getting all the range inputs +const ranges = document.querySelectorAll('input[type=range]') + +// Adding a listener to every input in order to have a dynamic progress +for (const range of ranges) { + range.addEventListener('input', () => { + const value = (range.value - range.min) / (range.max - range.min) * 100 + range.style.setProperty('--value', `${value}%`) + }) +} + +document.addEventListener('DOMContentLoaded', () => { + for (const range of ranges) { + const value = (range.value - range.min) / (range.max - range.min) * 100 + range.style.setProperty('--value', `${value}%`) + } +}) +``` + ## Sass ### Variables diff --git a/site/static/docs/5.2/assets/js/form-range.js b/site/static/docs/5.2/assets/js/form-range.js new file mode 100644 index 000000000000..fb02fa6522b0 --- /dev/null +++ b/site/static/docs/5.2/assets/js/form-range.js @@ -0,0 +1,22 @@ +// Example starter JavaScript for enabling form range +(() => { + 'use strict' + + // Getting all the range inputs + const ranges = document.querySelectorAll('#jsRange') + + // Adding a listener to every input in order to have a dynamic progress + for (const range of ranges) { + range.addEventListener('input', () => { + const value = (range.value - range.min) / (range.max - range.min) * 100 + range.style.setProperty('--value', `${value}%`) + }) + } + + document.addEventListener('DOMContentLoaded', () => { + for (const range of ranges) { + const value = (range.value - range.min) / (range.max - range.min) * 100 + range.style.setProperty('--value', `${value}%`) + } + }) +})() From b379e181d1dd6a337c75ed1804011d54af2a8239 Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Wed, 16 Nov 2022 10:33:44 +0100 Subject: [PATCH 2/5] Add added-in shortcode --- site/content/docs/5.2/forms/range.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/site/content/docs/5.2/forms/range.md b/site/content/docs/5.2/forms/range.md index 4d716634a925..f75c913827bc 100644 --- a/site/content/docs/5.2/forms/range.md +++ b/site/content/docs/5.2/forms/range.md @@ -49,6 +49,8 @@ By default, range inputs "snap" to integer values. To change this, you can speci ## Via javascript +{{< added-in "5.3.0" >}} + Range is not implemented with Javascript in Bootstrap. Here is a way to do so to have the same behavior on all supported browsers. Build a range input with `min` and `max` attributes. From f90554b466600aab4fcec4a302615c99bf3c75df Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Wed, 16 Nov 2022 11:43:54 +0100 Subject: [PATCH 3/5] fix(review) --- site/assets/scss/_component-examples.scss | 8 +++++--- site/content/docs/5.2/forms/range.md | 18 +++++++++--------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 361d7eb60637..776b5f484ce7 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -172,10 +172,12 @@ } .bd-example-range { - .form-range::-moz-range-track, + .form-range::-moz-range-track { + background: linear-gradient(to right, $blue-200 0%, $blue-200 var(--value, 0%), $gray-300 var(--value, 0%), $gray-300 100%); + } + .form-range::-webkit-slider-runnable-track { - height: .5rem; - background-image: linear-gradient(to right, #9ec5fe 0%, #9ec5fe var(--value, 0%), #dee2e6 var(--value, 0%), #dee2e6 100%); + background: linear-gradient(to right, $blue-200 0%, $blue-200 var(--value, 0%), $gray-300 var(--value, 0%), $gray-300 100%); } } diff --git a/site/content/docs/5.2/forms/range.md b/site/content/docs/5.2/forms/range.md index f75c913827bc..7965c6011cc2 100644 --- a/site/content/docs/5.2/forms/range.md +++ b/site/content/docs/5.2/forms/range.md @@ -6,7 +6,7 @@ group: forms toc: true extra_js: - src: "/docs/5.2/assets/js/form-range.js" - async: true + async: false --- ## Overview @@ -49,8 +49,6 @@ By default, range inputs "snap" to integer values. To change this, you can speci ## Via javascript -{{< added-in "5.3.0" >}} - Range is not implemented with Javascript in Bootstrap. Here is a way to do so to have the same behavior on all supported browsers. Build a range input with `min` and `max` attributes. @@ -60,17 +58,19 @@ Build a range input with `min` and `max` attributes. {{< /example >}} -The input backgrounds must be initialized in a different way. +The input track backgrounds must be initialized in a different way. Please note that `--value` is what does the trick so affordable. + +```scss +.form-range::-moz-range-track { + background: linear-gradient(to right, $blue-200 0%, $blue-200 var(--value, 0%), $gray-300 var(--value, 0%), $gray-300 100%); +} -```css -.form-range::-moz-range-track, .form-range::-webkit-slider-runnable-track { - height: .5rem; - background-image: linear-gradient(to right, #9ec5fe 0%, #9ec5fe var(--value, 0%), #dee2e6 var(--value, 0%), #dee2e6 100%); + background: linear-gradient(to right, $blue-200 0%, $blue-200 var(--value, 0%), $gray-300 var(--value, 0%), $gray-300 100%); } ``` -Introduce event listeners on the input to make it dynamic. +Introduce event listeners on the input to make it dynamic by changing the `--value`. ```js // Getting all the range inputs From 660ef0ce455127a95ac4eca7d2a77b5213813dc9 Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Fri, 18 Nov 2022 09:18:32 +0100 Subject: [PATCH 4/5] . --- site/content/docs/5.2/forms/range.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/content/docs/5.2/forms/range.md b/site/content/docs/5.2/forms/range.md index 7965c6011cc2..2a9d78ec6ad0 100644 --- a/site/content/docs/5.2/forms/range.md +++ b/site/content/docs/5.2/forms/range.md @@ -13,7 +13,7 @@ extra_js: Create custom `` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it. -However, if you really want to implement it, there's a way to do it with Javascript. Please see our [Javascript section](#via-javascript). +However, if you really want to implement it, there's a way to do it with JavaScript. Please see our [JavaScript section](#via-javascript). {{< example >}} @@ -47,9 +47,9 @@ By default, range inputs "snap" to integer values. To change this, you can speci {{< /example >}} -## Via javascript +## Via JavaScript -Range is not implemented with Javascript in Bootstrap. Here is a way to do so to have the same behavior on all supported browsers. +Range is not implemented with JavaScript in Bootstrap. Here is a way to do so to have the same behavior on all supported browsers. Build a range input with `min` and `max` attributes. From bbb16025903a9fd85b688b10611a82ab81fdd9d5 Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Mon, 20 Feb 2023 08:59:48 +0100 Subject: [PATCH 5/5] . --- site/content/docs/5.3/forms/range.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.3/forms/range.md b/site/content/docs/5.3/forms/range.md index e1619db6d6ca..37bfbe36513b 100644 --- a/site/content/docs/5.3/forms/range.md +++ b/site/content/docs/5.3/forms/range.md @@ -5,7 +5,7 @@ description: Use our custom range inputs for consistent cross-browser styling an group: forms toc: true extra_js: - - src: "/docs/5.2/assets/js/form-range.js" + - src: "/docs/5.3/assets/js/form-range.js" async: false ---