Skip to content
This repository has been archived by the owner on Sep 11, 2021. It is now read-only.

Added input range styling #52

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added input range styling #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
90 changes: 88 additions & 2 deletions docs/pages/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,14 @@ styles that look the same in all browsers, and are easy to tweak with utilities:
</select>
</label>\n

<div class="mt-4">
<label for="cc">Credit Cards</label>
<div class="flex items-center">
<input class="form-range flex-grow" type="range" min="1" max="5" value="1">
<input class="form-input w-10 ml-4 text-center" value="1" readonly>
</div>
</div>\n

<div class="flex mt-6">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox">
Expand Down Expand Up @@ -126,7 +134,15 @@ styles that look the same in all browsers, and are easy to tweak with utilities:
<option>$25,000</option>
</select>
</label>
<div className="flex mt-6">
<div className="mt-4">
<label htmlFor="cc">Credit Cards</label>
<div className="flex items-center">
<input id="cc" className="form-range flex-grow" type="range" min="1" max="5" defaultValue="1"
onInput={e=>{document.querySelector("#cc-value").value = e.target.value}} />
<input id="cc-value" className="form-input w-10 ml-4 text-center" value="1" readOnly />
</div>
</div>
<div className="flex mt-4">
<label className="flex items-center">
<input type="checkbox" className="form-checkbox"/>
<span className="ml-2">I agree to the <span className="underline">privacy policy</span></span>
Expand Down Expand Up @@ -388,13 +404,83 @@ use Tailwind's width and height utilities, like `h-6` and `w-6`.

---

## Range Input

Add basic styles to a normal `input` element using the `form-range` class.

<CodeSample code={`
<label class="block">
<span class="text-gray-700">Range</span>
<input type="range" class="form-range mt-1 block w-full">
</label>
`}/>

### Changing the color

You can customize the range colors in your tailwind configuration file.

```js
// tailwind.config.js
module.exports = {
theme: {
customForms: theme => ({
default: {
range: {
thumbBorderColor: theme('colors.orange.500'),
thumbBackgroundColor: theme('colors.orange.500'),
trackBorderColor: theme('colors.orange.300'),
trackBackgroundColor: theme('colors.orange.100'),
// disabled state
disabledThumbBorderColor: theme('colors.orange.300'),
disabledThumbBackgroundColor: theme('colors.orange.300'),
disabledTrackBorderColor: theme('colors.orange.200'),
disabledTrackBackgroundColor: theme('colors.orange.100'),
// active state
activeThumbBorderColor: theme('colors.orange.600'),
activeThumbBackgroundColor: theme('colors.orange.600'),
// focus state
focusColor: theme('colors.orange.400'),
},
},
})
},
plugins: [
require('@tailwindcss/custom-forms'),
]
}
```

### Changing the size

You can change the size of the range input in your tailwind configuration file.

```js
// tailwind.config.js
module.exports = {
theme: {
customForms: theme => ({
default: {
range: {
thumbSize: "1.5rem",
},
},
})
},
plugins: [
require('@tailwindcss/custom-forms'),
]
}
```

---

## Customizing the default styles

You can customize the default styles applied by this plugin in the `theme.customForms.default`
section of your `tailwind.config.js` file.

Each form element can be customized under the `input`, `textarea`, `select`, `multiselect`,
`checkbox`, and `radio` keys respectively.
`checkbox`, `radio` and `range` keys respectively.

```js
// tailwind.config.js
Expand Down
16 changes: 15 additions & 1 deletion src/defaultOptions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,20 @@ module.exports = {
backgroundSize: '100% 100%',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
},
}
},
range: {
thumbSize: "1.25rem",
focusColor: defaultTheme.colors.blue[400],
thumbBorderColor: defaultTheme.colors.gray[500],
thumbBackgroundColor: defaultTheme.colors.white,
trackBorderColor: defaultTheme.colors.gray[300],
trackBackgroundColor: defaultTheme.colors.gray[100],
disabledThumbBorderColor: defaultTheme.colors.gray[300],
disabledThumbBackgroundColor: defaultTheme.colors.white,
disabledTrackBorderColor: defaultTheme.colors.gray[200],
disabledTrackBackgroundColor: defaultTheme.colors.gray[100],
activeThumbBorderColor: defaultTheme.colors.gray[600],
activeThumbBackgroundColor: defaultTheme.colors.gray[300],
}
}
119 changes: 119 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,123 @@ module.exports = function ({ addUtilities, addComponents, theme, postcss }) {
}))
}

function addRange(options, modifier = '') {
if (isEmpty(options)) {
return
}

const focusRing = "4px"
const focus = {
boxShadow: `0 0 0 1px white, 0 0 0 ${focusRing} ${options.focusColor}`
}
const active = {
backgroundColor: options.activeThumbBackgroundColor,
borderColor: options.activeThumbBorderColor
}
const disabledThumb = {
'cursor': 'default',
borderColor: options.disabledThumbBorderColor,
backgroundColor: options.disabledThumbBackgroundColor
}
const disabledTrack = {
'cursor': 'default',
borderColor: options.disabledTrackBorderColor,
backgroundColor: options.disabledTrackBackgroundColor
}
const thumb = {
boxSizing: 'border-box',
width: options.thumbSize,
height: options.thumbSize,
borderWidth: '1px',
borderStyle: 'solid',
borderColor: options.thumbBorderColor,
borderRadius: '9999px',
backgroundColor: options.thumbBackgroundColor,
cursor: 'pointer',
appearance: 'none',
}
const track = {
boxSizing: 'border-box',
width: '100%',
height: `calc(${options.thumbSize} / 2)`,
backgroundColor: options.trackBackgroundColor,
borderWidth: '1px',
borderStyle: 'solid',
borderColor: options.trackBorderColor,
borderRadius: options.thumbSize,
cursor: 'pointer'
}

addComponents({
[`.form-range${modifier}`]: {
appearance: 'none',
backgroundColor: 'transparent',
cursor: 'pointer',
padding: '0',
// thumb size + focus ring + track border (1px top & 1px bottom) +
// thumb border (1px top & 1px bottom)
height: `calc(${options.thumbSize} + ${focusRing} + 4px)`,
'&:focus': {
outline: 'none',
'&::-webkit-slider-thumb': focus,
'&::-moz-range-thumb': focus,
'&::-ms-thumb': focus
},
'&::-moz-focus-outer': {
border: '0'
},
'&:disabled': {
cursor: 'default',
'&::-webkit-slider-thumb': disabledThumb,
'&::-moz-range-thumb': disabledThumb,
'&::-ms-thumb': disabledThumb,
'&::-webkit-slider-runnable-track': disabledTrack,
'&::-moz-range-track': disabledTrack,
'&::-ms-fill-lower': disabledTrack,
'&::-ms-fill-upper': disabledTrack
},
// Chrome & Safari
'&::-webkit-slider-thumb': {
// Position fix for chrome:
// half of the track size (thumb size / 2 = track size)
// plus the thumb top border width (1px)
marginTop: `calc(-${options.thumbSize} / 4 - 1px)`,
...thumb,
'&:active': active
},
'&::-webkit-slider-runnable-track': track,
// Firefox
'&::-moz-range-thumb': {
...thumb,
'&:active': active
},
'&::-moz-range-track': track,
// IE11 & Edge
'&::-ms-thumb': {
// remove added margin
marginTop: '0',
// prevent focus ring being cut off
marginRight: focusRing,
marginLeft: focusRing,
...thumb,
'&:active': active
},
'&::-ms-track': {
width: '100%',
boxSizing: 'border-box',
color: 'transparent',
cursor: 'pointer',
backgroundColor: 'transparent',
// border used to add space for the focus ring
borderColor: 'transparent',
borderWidth: `calc(${options.thumbSize} / 2)`,
},
'&::-ms-fill-lower': track,
'&::-ms-fill-upper': track
}
})
}

function registerComponents() {
const options = resolveOptions(theme('customForms'))

Expand All @@ -159,6 +276,7 @@ module.exports = function ({ addUtilities, addComponents, theme, postcss }) {
addSelect(options.default.select)
addCheckbox(options.default.checkbox)
addRadio(options.default.radio)
addRange(options.default.range)

Object.keys((({ default: _default, ...rest }) => rest)(options)).forEach(key => {
const modifier = `-${key}`
Expand All @@ -169,6 +287,7 @@ module.exports = function ({ addUtilities, addComponents, theme, postcss }) {
addSelect(options[key].select || {}, modifier)
addCheckbox(options[key].checkbox || {}, modifier)
addRadio(options[key].radio || {}, modifier)
addRange(options[key].range || {}, modifier)
})
}

Expand Down