Skip to content

Commit

Permalink
Add color to Range slider
Browse files Browse the repository at this point in the history 
@tmeasday can you double check the Types on line 10
  • Loading branch information
@domyen
domyen committed May 29, 2021
1 parent ccc4701 commit 6d61470
Showing 1 changed file with 130 additions and 125 deletions.
255 changes: 130 additions & 125 deletions lib/components/src/controls/Range.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,143 +7,148 @@ import { parse } from './Number';

type RangeProps = ControlProps<NumberValue | null> & RangeConfig;

const RangeInput = styled.input<{ hasValue: boolean }>(({ theme, hasValue }) => ({
// Resytled using http://danielstern.ca/range.css/#/
'&': {
width: '100%',
backgroundColor: 'transparent',
appearance: 'none',
},

'&::-webkit-slider-runnable-track': {
background:
theme.base === 'light'
? darken(0.02, theme.input.background)
: lighten(0.02, theme.input.background),
border: `1px solid ${theme.appBorderColor}`,
borderRadius: 6,
width: '100%',
height: 6,
cursor: 'pointer',
},

// FIXME
...(hasValue && {
'&::-moz-range-progress': { background: 'green' },
'&::-ms-fill-lower': { background: 'green' },
'&::-webkit-slider-runnable-track': { background: 'green' },
}),

'&::-webkit-slider-thumb': {
marginTop: '-6px',
width: 16,
height: 16,

border: `1px solid ${rgba(theme.appBorderColor, 0.2)}`,
borderRadius: '50px',
boxShadow: `0 1px 3px 0px ${rgba(theme.appBorderColor, 0.2)}`,
cursor: 'grab',
appearance: 'none',
background: `${theme.input.background}`,
transition: 'all 150ms ease-out',

'&:hover': {
background: `${darken(0.05, theme.input.background)}`,
transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
transition: 'all 50ms ease-out',
const RangeInput = styled.input<{ hasValue: boolean; min: number; max: number; value: number }>(
({ theme, hasValue, min, max, value }) => ({
// Resytled using http://danielstern.ca/range.css/#/
'&': {
width: '100%',
backgroundColor: 'transparent',
appearance: 'none',
},

'&:active': {
'&::-webkit-slider-runnable-track': {
background:
theme.base === 'light'
? `linear-gradient(to right,
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
${darken(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
${darken(0.02, theme.input.background)} 100%)`
: `linear-gradient(to right,
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
${lighten(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
${lighten(0.02, theme.input.background)} 100%)`,
boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
borderRadius: 6,
width: '100%',
height: 6,
cursor: 'pointer',
},

'&::-webkit-slider-thumb': {
marginTop: '-6px',
width: 16,
height: 16,

border: `1px solid ${rgba(theme.appBorderColor, 0.2)}`,
borderRadius: '50px',
boxShadow: `0 1px 3px 0px ${rgba(theme.appBorderColor, 0.2)}`,
cursor: 'grab',
appearance: 'none',
background: `${theme.input.background}`,
transform: 'scale3d(1, 1, 1) translateY(0px)',
cursor: 'grabbing',
transition: 'all 150ms ease-out',

'&:hover': {
background: `${darken(0.05, theme.input.background)}`,
transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
transition: 'all 50ms ease-out',
},

'&:active': {
background: `${theme.input.background}`,
transform: 'scale3d(1, 1, 1) translateY(0px)',
cursor: 'grabbing',
},
},
},

'&:focus': {
outline: 'none',
'&:focus': {
outline: 'none',

'&::-webkit-slider-runnable-track': {
borderColor: rgba(theme.color.secondary, 0.4),
background: theme.background.hoverable,
},
'&::-webkit-slider-runnable-track': {
borderColor: rgba(theme.color.secondary, 0.4),
},

'&::-webkit-slider-thumb': {
borderColor: theme.color.secondary,
boxShadow: `0 0px 5px 0px ${theme.color.secondary}`,
'&::-webkit-slider-thumb': {
borderColor: theme.color.secondary,
boxShadow: `0 0px 5px 0px ${theme.color.secondary}`,
},
},
},

'&::-moz-range-track': {
background:
theme.base === 'light'
? darken(0.02, theme.input.background)
: lighten(0.02, theme.input.background),
border: '1px solid rgba(0, 0, 0, 0.1)',
borderRadius: 6,
width: '100%',
height: 6,
cursor: 'pointer',
outline: 'none',
},

'&::-moz-range-thumb': {
width: 16,
height: 16,
border: `1px solid ${rgba(theme.color.border, 0.2)}`,
borderRadius: '50px',
boxShadow: `0 1px 3px 0px ${rgba(theme.color.border, 0.2)}`,
cursor: 'grab',
background: `${theme.input.background}`,
transition: 'all 150ms ease-out',

'&:hover': {
background: `${darken(0.05, theme.input.background)}`,
transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
transition: 'all 50ms ease-out',

'&::-moz-range-track': {
background:
theme.base === 'light'
? `linear-gradient(to right,
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
${darken(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
${darken(0.02, theme.input.background)} 100%)`
: `linear-gradient(to right,
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
${lighten(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
${lighten(0.02, theme.input.background)} 100%)`,
boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
borderRadius: 6,
width: '100%',
height: 6,
cursor: 'pointer',
outline: 'none',
},

'&:active': {
'&::-moz-range-thumb': {
width: 16,
height: 16,
border: `1px solid ${rgba(theme.color.border, 0.2)}`,
borderRadius: '50px',
boxShadow: `0 1px 3px 0px ${rgba(theme.color.border, 0.2)}`,
cursor: 'grab',
background: `${theme.input.background}`,
transition: 'all 150ms ease-out',

'&:hover': {
background: `${darken(0.05, theme.input.background)}`,
transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
transition: 'all 50ms ease-out',
},

'&:active': {
background: `${theme.input.background}`,
transform: 'scale3d(1, 1, 1) translateY(0px)',
cursor: 'grabbing',
},
},
'&::-ms-track': {
background:
theme.base === 'light'
? `linear-gradient(to right,
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
${darken(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
${darken(0.02, theme.input.background)} 100%)`
: `linear-gradient(to right,
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
${lighten(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
${lighten(0.02, theme.input.background)} 100%)`,
boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
color: 'transparent',
width: '100%',
height: '6px',
cursor: 'pointer',
},
'&::-ms-fill-lower': {
borderRadius: 6,
},
'&::-ms-fill-upper': {
borderRadius: 6,
},
'&::-ms-thumb': {
width: 16,
height: 16,
background: `${theme.input.background}`,
transform: 'scale3d(1, 1, 1) translateY(0px)',
cursor: 'grabbing',
border: `1px solid ${rgba(theme.appBorderColor, 0.2)}`,
borderRadius: 50,
cursor: 'grab',
marginTop: 0,
},
},
'&::-ms-track': {
background:
theme.base === 'light'
? darken(0.02, theme.input.background)
: lighten(0.02, theme.input.background),
borderColor: 'transparent',
borderWidth: '7.3px 0',
color: 'transparent',
width: '100%',
height: '6px',
cursor: 'pointer',
},
'&::-ms-fill-lower': {
background: '#dadada',
border: `1px solid ${theme.appBorderColor}`,
borderRadius: 6,
},
'&::-ms-fill-upper': {
background: '#dddddd',
border: `1px solid ${theme.appBorderColor}`,
borderRadius: 6,
},
'&::-ms-thumb': {
width: 16,
height: 16,
background: `${theme.input.background}`,
border: `1px solid ${rgba(theme.appBorderColor, 0.2)}`,
borderRadius: 50,
cursor: 'grab',
marginTop: 0,
},
'&:focus::-ms-fill-lower': { background: '#dddddd' },
'&:focus::-ms-fill-upper': { background: '#e0e0e0' },
'@supports (-ms-ime-align:auto)': { 'input[type=range]': { margin: '0' } },
}));
'@supports (-ms-ime-align:auto)': { 'input[type=range]': { margin: '0' } },
})
);

const RangeLabel = styled.span({
paddingLeft: 5,
Expand Down

0 comments on commit 6d61470

Please sign in to comment.