Skip to content

Commit

Permalink
feat: slider size
Browse files Browse the repository at this point in the history
  • Loading branch information
baltaazr committed Feb 23, 2021
1 parent d60b2b9 commit a5c081b
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 25 deletions.
3 changes: 2 additions & 1 deletion .stylelintrc
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"declaration-empty-line-before": null,
"value-keyword-case": null,
"declaration-bang-space-before": null,
"function-name-case": null
"function-name-case": null,
"unit-no-unknown": null
}
}
19 changes: 14 additions & 5 deletions src/Slider/Slider.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { MergeElementProps } from '../utils'
import { Size } from '../types'

import {
StyledSlider,
Expand Down Expand Up @@ -27,6 +28,7 @@ export type SliderProps = MergeElementProps<
vertical?: boolean
marks?: object
style?: React.CSSProperties & object
size?: Size
}
>

Expand All @@ -40,7 +42,8 @@ const Slider: FC<SliderProps> = (props) => {
value: valueProps,
disabled,
vertical,
marks
marks,
size
} = props

useEffect(() => {
Expand All @@ -55,12 +58,15 @@ const Slider: FC<SliderProps> = (props) => {
const trackRef = React.useRef<HTMLDivElement>(null)
const valueRef = React.useRef<number>(valueProps! | defaultValue!)

const offset = size === 'lg' ? 10 : 7

const getPercentage = (current: number, min: number, max: number) =>
(100 * (current - min)) / (max - min)

const getLeft = (percentage: number) => `calc(${percentage}% - 7px)`
const getLeft = (percentage: number) => `calc(${percentage}% - ${offset}px)`

const getTop = (percentage: number) => `calc(${100 - percentage}% - 7px)`
const getTop = (percentage: number) =>
`calc(${100 - percentage}% - ${offset}px)`

const getLeftMark = (percentage: number) => `calc(${percentage}% + 0px)`

Expand Down Expand Up @@ -190,19 +196,21 @@ const Slider: FC<SliderProps> = (props) => {
hover={hover}
focus={focus}
>
<Rail vertical={vertical} />
<Rail vertical={vertical} size={size} />
<Track
ref={trackRef}
style={trackInitialStyle}
disabled={disabled}
vertical={vertical}
size={size}
/>
<Thumb
ref={thumbRef}
style={thumbInitialStyle}
focus={focus}
disabled={disabled}
vertical={vertical}
size={size}
/>
</StyledSlider>
)
Expand All @@ -228,7 +236,8 @@ Slider.defaultProps = {
min: 0,
max: 100,
defaultValue: 0,
step: 1
step: 1,
size: 'md'
}

export { Slider }
46 changes: 28 additions & 18 deletions src/Slider/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,47 +6,57 @@ import { rem } from 'polished'
const horizontalSlider = css<SliderProps>`
height: ${rem('4px')};
margin: ${({ marks }) => (marks ? `0 ${rem('10px')}` : null)};
padding: ${rem('6px')} 0 ${rem('10px')} 0;
padding: ${({ size }) =>
size === 'lg'
? `${rem('8px')} 0 ${rem('15px')} 0`
: `${rem('6px')} 0 ${rem('10px')} 0`};
`

const verticalSlider = css<SliderProps>`
width: ${rem('4px')};
height: 100%;
padding: 0 ${rem('10px')} 0 ${rem('6px')};
padding: ${({ size }) =>
size === 'lg'
? `0 ${rem('15px')} 0 ${rem('8px')}`
: `0 ${rem('10px')} 0 ${rem('6px')}`};
`

const horizontalRail = css`
const horizontalRail = css<SliderProps>`
right: auto;
left: 0;
width: 100%;
height: ${rem('4px')};
height: ${({ size, theme: { space } }) =>
size === 'lg' ? space[2] : space[1]};
`

const verticalRail = css`
const verticalRail = css<SliderProps>`
top: auto;
bottom: 0;
width: ${rem('4px')};
width: ${({ size, theme: { space } }) =>
size === 'lg' ? space[2] : space[1]};
height: 100%;
`

const horizontalTrack = css`
const horizontalTrack = css<SliderProps>`
right: auto;
left: 0;
height: ${rem('4px')};
height: ${({ size, theme: { space } }) =>
size === 'lg' ? space[2] : space[1]};
`

const verticalTrack = css`
const verticalTrack = css<SliderProps>`
top: auto;
bottom: 0;
width: ${rem('4px')};
width: ${({ size, theme: { space } }) =>
size === 'lg' ? space[2] : space[1]};
`

const horizontalThumb = css`
top: ${rem('-5px')};
const horizontalThumb = css<SliderProps>`
top: ${({ size }) => (size === 'lg' ? rem('-7px') : rem('-5px'))};
`

const verticalThumb = css`
left: ${rem('-5px')};
const verticalThumb = css<SliderProps>`
left: ${({ size }) => (size === 'lg' ? rem('-7px') : rem('-5px'))};
`

const horizontalMark = css`
Expand Down Expand Up @@ -110,23 +120,23 @@ export const MarksContainer = styled.div<SliderProps>`
export const Rail = styled.div<SliderProps>`
${({ vertical }) => (vertical ? verticalRail : horizontalRail)}
position: absolute;
border-radius: ${rem('2px')};
border-radius: ${({ size }) => (size === 'lg' ? rem('4px') : rem('8px'))};
background-color: ${({ theme }) => theme.colors.gray4};
`

export const Track = styled.div<SliderProps>`
${({ vertical }) => (vertical ? verticalTrack : horizontalTrack)}
position: absolute;
border-radius: ${rem('2px')};
border-radius: ${({ size }) => (size === 'lg' ? rem('4px') : rem('8px'))};
background-color: ${({ disabled, theme }) =>
disabled ? theme.colors.gray6 : theme.colors.base};
`

export const Thumb = styled.div<SliderProps>`
${({ vertical }) => (vertical ? verticalThumb : horizontalThumb)}
position: relative;
width: ${rem('14px')};
height: ${rem('14px')};
width: ${({ size }) => (size === 'lg' ? rem('22px') : rem('14px'))};
height: ${({ size }) => (size === 'lg' ? rem('22px') : rem('14px'))};
border-radius: 50%;
background: ${({ focus, disabled, theme }) =>
disabled
Expand Down
15 changes: 14 additions & 1 deletion website/docs/slider.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,18 @@ function RegularSlider() {
}
```

### Size

```js live
<>
<Text>Medium Slider</Text>
<Slider defaultValue={30} size='md' />
<br />
<Text>Large Slider</Text>
<Slider defaultValue={30} size='lg' />
</>
```

### Step

```js live
Expand Down Expand Up @@ -111,7 +123,7 @@ function DisplayValueSlider() {
backgroundColor: '#e0e0e0',
display: 'flex',
alignItems: 'center',
padding: 20,
padding: 15,
width: 250
}}
>
Expand All @@ -124,6 +136,7 @@ function DisplayValueSlider() {
style={{ flex: 7 }}
min={1}
max={24}
size='lg'
/>
<Text strong style={{ flex: 3 }} textAlign='right'>
{value} Hr
Expand Down

0 comments on commit a5c081b

Please sign in to comment.