unimore/pds-2021-g2-nest
unimore/pds-2021-g2-nest
1
Fork 0
mirror of https://github.com/pds-nest/nest.git synced 2024-11-24 22:14:18 +00:00
Code Activity

✨ Add Slider

Browse source
This commit is contained in:
Stefano Pigozzi 2021-04-27 16:52:54 +02:00
parent 21ef90f17f
commit 488531d1d5
Signed by untrusted user who does not match committer: steffo
GPG key ID: 6965406171929D01
2 changed files with 59 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
code/frontend/src/components/Slider.js Normal file
View file

@ -0,0 +1,23 @@
import React from "react"
import Style from "./Slider.module.css"
import classNames from "classnames"
/**
* A slider that allows to select a numeric value in a range.
*
* @todo Custom styling only works on Firefox!
*
* @param className - Additional class(es) to add to the element.
* @param props - Additional props to pass to the element.
* @returns {JSX.Element}
* @constructor
*/
export default function Slider({ className, ...props }) {
return (
<input
type={"range"}
className={classNames(Style.Slider, className)} {...props}
/>
)
}

36
code/frontend/src/components/Slider.module.css Normal file
View file

@ -0,0 +1,36 @@
.Slider {
width: 100%;
}
@-moz-document url-prefix() {
.Slider {
outline: none;
background-color: transparent;
}
.Slider::-moz-range-track {
background-color: var(--bg-field-off);
height: 10px;
border-radius: 5px;
}
.Slider:focus::-moz-range-track {
background-color: var(--bg-field-on);
}
.Slider::-moz-range-progress {
height: 10px;
border-radius: 5px;
}
.Slider::-moz-range-thumb {
background-color: var(--fg-field-off);
border-width: 0;
height: 25px;
width: 10px;
}
.Slider:focus::-moz-range-thumb {
background-color: var(--fg-field-on);
}
}