Skip to content

Commit 013a737

Browse files
tmorehousetmorehouse
authored
feat(form-input): support custom-range input + validation and input styles (bootstrap-vue#2120)
* Add custom-range class to type=range * Add validation and focus styling * Move type color and type range into separate css files * Bump Bootstrap dep to V4.1.3 for latest `.custom-range` styles * Plaintext not supported by types range or color * Document range input * Add tests for type range and color * Include range example in input-group docs
1 parent c64cd6c commit 013a737

File tree

8 files changed

+512
-48
lines changed

8 files changed

+512
-48
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
"postinstall": "opencollective-postinstall || exit 0"
6363
},
6464
"dependencies": {
65-
"bootstrap": "^4.1.1",
65+
"bootstrap": "^4.1.3",
6666
"lodash.get": "^4.4.2",
6767
"lodash.startcase": "^4.4.0",
6868
"opencollective-postinstall": "^2.0.0",

‎src/components/form-input/README.md

Lines changed: 79 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Textual and Value inputs
22

3-
> Create various text style inputs such as: `text`, `password`, `number`, `url`,
4-
`email`, `search`, `range` and more.
3+
> Create various type inputs such as: `text`, `password`, `number`, `url`,
4+
`email`, `search`, `range`, `date` and more.
55

66
```html
77
<template>
@@ -65,16 +65,81 @@ will be rendered and a console warning will be issued.
6565
**Caveats with input types:**
6666
- Not all browsers support all input types, nor do some types render in the same format across
6767
browser types/versions.
68-
- Browsers that do not support a particular type will fall back to
69-
a `text` input type (event thoough the rendered `type` attribute markup shows the requested type).
68+
- Browsers that do not support a particular type will fall back to a `text` input type (event thoough the rendered `type` attribute markup shows the requested type).
69+
- No testing is performed to see if the requested input type is supported by the browser.
7070
- Chrome lost support for `datetime` in version 26, Opera in version 15, and Safari in iOS 7.
7171
Instead of using `datetime`, since support should be deprecated, use `date` and `time`
7272
as two separate inputs.
73+
- `date` and `time` inputs are native borwser types, and are not a custom date/time picker.
7374
- For date and time style inputs, where supported, the displayed value in the GUI may be different
74-
than what is returned by it's value.
75+
than what is returned by it's value (i.e. ordering of year-month-date).
7576
- Regardless of input type, the value is **always** returned as a string representation.
7677
- `v-model.lazy` is not supported by `<b-form-input>` (nor any custom vue component).
7778
- `v-model` modifiers `.number` and `.trim` can cause unexpected cursor jumps when the user is typing (this is a Vue issue with `v-model` on custom components). Avoid using these modifiers.
79+
- Older version of firefox may not support `readonly` for `range` type inputs.
80+
- Input types that do not support `min`, `max` and `step` (i.e. `text`, `password`, `tel`, `email`, `url`, etc) will silently ignore these values (although they will still be rendered on the input markup).
81+
82+
### Range type input
83+
Inputs with type `range` render using Bootstrap V4's `.custom-range` class. The track
84+
(the background) and thumb (the value) are both styled to appear the same across browsers.
85+
86+
Range inputs have implicit values for `min` and `max` of `0` and `100` respectively. You
87+
may specify new values for those using the `min` and `max` props.
88+
89+
```html
90+
<template>
91+
<div>
92+
<label for="range-1">Example range with min and max</label>
93+
<b-form-input type="range" id="range-1" v-model="value" min="0" max="5" />
94+
<p class="mt-2">Value: {{ value }}</p>
95+
</div>
96+
</template>
97+
98+
<script>
99+
export default {
100+
data () {
101+
return {
102+
value: 2
103+
}
104+
}
105+
}
106+
</script>
107+
108+
<!-- form-input-range-1.vue -->
109+
```
110+
111+
By default, range inputs “snap” to integer values. To change this, you can specify a `step`
112+
value. In the example below, we double the number of steps by using step="0.5".
113+
114+
```html
115+
<template>
116+
<div>
117+
<label for="range-2">Example range with step value</label>
118+
<b-form-input type="range" id="range-2" v-model="value" min="0" max="5" step="0.5" />
119+
<p class="mt-2">Value: {{ value }}</p>
120+
</div>
121+
</template>
122+
123+
<script>
124+
export default {
125+
data () {
126+
return {
127+
value: 2
128+
}
129+
}
130+
}
131+
</script>
132+
133+
<!-- form-input-range-2.vue -->
134+
```
135+
136+
**Note:** Range inputs (as do all input types) return their value as a string. You may
137+
need to convert the value to a native number by using `Number(value)`, `parseInt(value, 10)`,
138+
`parseFloat(value)`, or use the `.number` modifier on the `v-model`.
139+
140+
**Note:** Bootsttrap V4.1 CSS does not include styling for range inputs inside input groups,
141+
nor validation styling on range inputs. However, Bootstrap-Vue includes custom styling to handle
142+
these situations until styling is included in Bootstrap V4.
78143

79144

80145
## Control sizing
@@ -107,6 +172,14 @@ To control width, place the input inside standard Bootstrap grid column.
107172
<!-- form-input-size-1.vue -->
108173
```
109174

175+
**Note:** Input type `range` currently does not support control sizing unless it is placed inside a
176+
`<b-input-group>` which has its `size` prop set.
177+
178+
**Note:** The native HTML `<input>` attribute `size` (which sets a horizontal width on the
179+
`<input>` in characters) is not supported. Use styling, utility classes, or the layout rows (`<b-row>`)
180+
and columns (`<b-col>`) to set the desired width.
181+
182+
110183
## Contextual States
111184
Bootstrap includes validation styles for `valid` and `invalid` states
112185
on most form controls.
@@ -299,6 +372,7 @@ If you want to have `<b-form-input readonly>` elements in your form styled as pl
299372
text, set the `plaintext` prop (no need to set `readonly`) to remove the default form
300373
field styling and preserve the correct margin and padding.
301374

375+
The `plaintext` option is not supported by input types `color` or `range`.
302376

303377
## Disabling mousewheel events on numeric-like inputs
304378
On some browsers, scrolling the mousewheel while a numeric-like input is focused will

‎src/components/form-input/form-input-type-color.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*
2+
* Special styling for type=color input
3+
* Bootstrap V4.x does not have special styling for color input
4+
* So we define some basic styles to compensate
5+
*/
6+
7+
input[type="color"].form-control {
8+
height: 2.25rem;
9+
padding: 0.25rem 0.25rem;
10+
}
11+
12+
input[type="color"].form-control.form-control-sm,
13+
.input-group-sm input[type="color"].form-control {
14+
height: 1.9375rem;
15+
padding: 0.125rem 0.125rem;
16+
}
17+
18+
input[type="color"].form-control.form-control-lg,
19+
.input-group-lg input[type="color"].form-control {
20+
height: 3rem;
21+
}
22+
23+
input[type="color"].form-control:disabled {
24+
background-color: #adb5bd;
25+
opacity: 0.65;
26+
}

0 commit comments

Comments
 (0)