Feat/input range component

@types/cherry.d.ts

@@ -26,6 +26,8 @@ declare class Input extends React.Component<InputProps, any> {}
 
 declare class ToggleInput extends React.Component<ToggleInputProps, any> {}
 
+declare class RangeSlider extends React.Component<RangeSliderProps, any> {}
+
 declare class Select extends React.Component<SelectProps, any> {}
 
 declare class Textarea extends React.Component<TextareaProps, any> {}
@@ -177,6 +179,13 @@ interface ToggleInputProps
 	theme?: object;
 }
 
+interface RangeSliderProps
+	extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+	type?: "range";
+	size?: "default" | "big";
+	theme?: object;
+}
+
 interface SelectProps
 	extends Omit<React.InputHTMLAttributes<HTMLSelectElement>, "size"> {
 	children?: React.ReactNode;
@@ -242,10 +251,11 @@ export {
 	H4,
 	H5,
 	H6,
-	Input,
-	ToggleInput,
+	RangeSlider,
 	Select,
 	Textarea,
+	ToggleInput,
+	Input,
 	Label,
 	MinHeight,
 	Space,

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cherry-components",
-	"version": "0.0.2-1",
+	"version": "0.0.2-2",
 	"description": "Cherry React Components",
 	"main": "dist/cherry.js",
 	"module": "dist/cherry.module.js",

src/Layout/Input/Input.styles.js

@@ -5,6 +5,7 @@ import {
 	resetButtonStyles,
 } from "../../helperStyles";
 import { Breakpoints, mq } from "../../mq";
+import { rangeSliderStyles } from "./RangeSlider/RangeSlider.styles";
 
 export const inputStyles = (
 	theme,
@@ -98,6 +99,11 @@ export const inputStyles = (
 		border-radius: 50%;
 	`}
 
+	${type === "range" &&
+	css`
+		${rangeSliderStyles(theme, size, disabled)}
+	`}
+
 	${disabled &&
 	css`
 		background: ${theme.colors.grayLight};

src/Layout/Input/RangeSlider/RangeSlider.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { localTheme } from "../../../theme";
+import { Label } from "../../Label/Label";
+import { inputStyles } from "../Input.styles";
+
+function RangeSlider({
+	className,
+	size = "default",
+	theme = localTheme,
+	...props
+}) {
+	return (
+		<input
+			type="range"
+			className={className}
+			css={inputStyles(
+				theme,
+				"range",
+				size,
+				props.disabled,
+				false,
+				false,
+				false,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { RangeSlider };

src/Layout/Input/RangeSlider/RangeSlider.styles.js

@@ -0,0 +1,178 @@
+import { css } from "@emotion/react";
+import { resetButtonStyles } from "../../../helperStyles";
+
+export const rangeSliderStyles = (theme, size, disabled) => css`
+	padding: 0;
+	height: 10px;
+	font-size: 0;
+	box-shadow: none;
+	border: none;
+
+	&::-webkit-slider-runnable-track {
+		width: 100%;
+		cursor: pointer;
+		background: ${theme.colors.grayLight};
+		border-radius: 25px;
+		border: 2px solid ${theme.colors.grayLight};
+		transition: all 0.3s ease;
+		box-shadow: 0 0 0 0 ${theme.colors.secondaryLight};
+	}
+
+	&::-webkit-slider-thumb {
+		${resetButtonStyles}
+		border: 0 solid transparent;
+		border-radius: 50%;
+		background: ${theme.colors.secondary};
+		cursor: pointer;
+		box-shadow: 0 0 0 0 ${theme.colors.secondaryLight};
+		transition: all 0.3s ease;
+	}
+
+	&::-moz-range-track {
+		width: 100%;
+		height: 6px;
+		cursor: pointer;
+		background: ${theme.colors.grayLight};
+		border-radius: 25px;
+		border: 2px solid ${theme.colors.grayLight};
+		transition: all 0.3s ease;
+		box-shadow: 0 0 0 0 ${theme.colors.secondaryLight};
+	}
+
+	&::-moz-range-thumb {
+		border: 0 solid transparent;
+		height: 22px;
+		width: 22px;
+		border-radius: 50%;
+		background: ${theme.colors.secondary};
+		cursor: pointer;
+		box-shadow: 0 0 0 0 ${theme.colors.secondaryLight};
+		transition: all 0.3s ease;
+	}
+
+	@media (hover: hover) {
+		&:hover:not([disabled]) {
+			&::-webkit-slider-runnable-track {
+				border-color: ${theme.colors.secondary};
+			}
+
+			&::-moz-range-track {
+				border-color: ${theme.colors.secondary};
+			}
+		}
+	}
+
+	&:focus:not([disabled]) {
+		box-shadow: none;
+
+		&::-webkit-slider-runnable-track {
+			border-color: ${theme.colors.secondary};
+			background: ${theme.colors.grayLight};
+			box-shadow: 0 0 0 4px ${theme.colors.secondaryLight};
+		}
+
+		&::-webkit-slider-thumb {
+			border-color: ${theme.colors.grayLight};
+			box-shadow: 0 0 0 4px ${theme.colors.secondaryLight};
+			outline: none;
+		}
+
+		&::-moz-range-track {
+			border-color: ${theme.colors.secondary};
+			box-shadow: 0 0 0 4px ${theme.colors.secondaryLight};
+		}
+
+		&::-moz-range-thumb {
+			border-color: ${theme.colors.grayLight};
+			box-shadow: 0 0 0 4px ${theme.colors.secondaryLight};
+			outline: none;
+		}
+	}
+
+	&:active:not([disabled]) {
+		box-shadow: none;
+
+		&::-webkit-slider-runnable-track {
+			box-shadow: 0 0 0 2px ${theme.colors.secondaryLight};
+		}
+
+		&::-webkit-slider-thumb {
+			box-shadow: 0 0 0 2px ${theme.colors.secondaryLight};
+		}
+
+		&::-moz-range-track {
+			box-shadow: 0 0 0 2px ${theme.colors.secondaryLight};
+		}
+
+		&::-moz-range-thumb {
+			box-shadow: 0 0 0 2px ${theme.colors.secondaryLight};
+		}
+	}
+
+	${size === "big"
+		? css`
+				min-width: 200px;
+
+				&::-webkit-slider-runnable-track {
+					height: 14px;
+				}
+
+				&::-webkit-slider-thumb {
+					width: 32px;
+					height: 32px;
+					margin-top: -11px;
+				}
+
+				&::-moz-range-track {
+					height: 10px;
+				}
+
+				&::-moz-range-thumb {
+					width: 32px;
+					height: 32px;
+				}
+		  `
+		: css`
+				min-width: 130px;
+
+				&::-webkit-slider-runnable-track {
+					height: 10px;
+				}
+
+				&::-webkit-slider-thumb {
+					height: 22px;
+					width: 22px;
+					margin-top: -8px;
+				}
+
+				&::-moz-range-track {
+					height: 6px;
+				}
+
+				&::-moz-range-thumb {
+					width: 22px;
+					height: 22px;
+				}
+		  `}
+
+	${disabled &&
+	css`
+		&::-webkit-slider-runnable-track {
+			cursor: not-allowed;
+		}
+
+		&::-webkit-slider-thumb {
+			background: ${theme.colors.gray};
+			cursor: not-allowed;
+		}
+
+		&::-moz-range-track {
+			cursor: not-allowed;
+		}
+
+		&::-moz-range-thumb {
+			background: ${theme.colors.gray};
+			cursor: not-allowed;
+		}
+	`}
+`;

src/Layout/Input/RangeSlider/index.js

@@ -0,0 +1 @@
+export { RangeSlider } from "./RangeSlider";

src/Layout/Input/ToggleInput.js → src/Layout/Input/ToggleInput/ToggleInput.js

@@ -1,7 +1,7 @@
 import React from "react";
-import { localTheme } from "../../theme";
-import { Label } from "../Label";
-import { radioCheckWrapperStyles } from "./Input.styles";
+import { localTheme } from "../../../theme";
+import { Label } from "../../Label";
+import { radioCheckWrapperStyles } from "../Input.styles";
 import { toggleInputStyles } from "./ToggleInput.styles";
 
 function ToggleInput({

src/Layout/Input/ToggleInput.styles.js → src/Layout/Input/ToggleInput/ToggleInput.styles.js

@@ -1,5 +1,5 @@
 import { css } from "@emotion/react";
-import { resetButtonStyles } from "../../helperStyles";
+import { resetButtonStyles } from "../../../helperStyles";
 
 export const toggleInputStyles = (theme, size) => css`
 	display: inline-block;

src/Layout/Input/ToggleInput/index.js

@@ -0,0 +1 @@
+export { ToggleInput } from "./ToggleInput";

src/Layout/Input/index.js

@@ -1,4 +1,5 @@
+export { RangeSlider } from "./RangeSlider";
 export { Select } from "./Select";
 export { Textarea } from "./Textarea";
-export { Input } from "./Input";
 export { ToggleInput } from "./ToggleInput";
+export { Input } from "./Input";

src/Layout/index.js

@@ -3,7 +3,7 @@ export { Container } from "./Container";
 export { FontStyle } from "./FontStyle";
 export { Row, Col } from "./Grid";
 export { H1, H2, H3, H4, H5, H6 } from "./Heading";
-export { Select, Textarea, Input, ToggleInput } from "./Input";
+export { RangeSlider, Select, Textarea, ToggleInput, Input } from "./Input";
 export { Label } from "./Label";
 export { MinHeight } from "./MinHeight";
 export { Space } from "./Space";

src/index.js

@@ -10,10 +10,11 @@ export {
 	H4,
 	H5,
 	H6,
-	Input,
-	ToggleInput,
+	RangeSlider,
 	Select,
 	Textarea,
+	ToggleInput,
+	Input,
 	Label,
 	MinHeight,
 	Space,