@netdata/netdata-ui
Version:
netdata UI kit
39 lines • 1.47 kB
JavaScript
import styled from "styled-components";
import Box from "../../templates/box";
import InputRange from "../range";
export var Slider = styled(Box).withConfig({
displayName: "styled__Slider",
componentId: "sc-y2g216-0"
})([""]);
export var SliderTrack = styled(Box).withConfig({
displayName: "styled__SliderTrack",
componentId: "sc-y2g216-1"
})(["background-position:", ";background-color:", "40;background-image:linear-gradient( ", ",", " );background-repeat:no-repeat;background-size:", ";height:2px;width:", ";"], function (_ref) {
var max = _ref.max,
min = _ref.min,
minValue = _ref.minValue,
width = _ref.width;
return width * ((minValue - min) / (max - min)) * 100 / 100 + "px 100%";
}, function (_ref2) {
var theme = _ref2.theme;
return theme.colors.primary;
}, function (_ref3) {
var theme = _ref3.theme;
return theme.colors.primary;
}, function (_ref4) {
var theme = _ref4.theme;
return theme.colors.primary;
}, function (_ref5) {
var max = _ref5.max,
maxValue = _ref5.maxValue,
min = _ref5.min,
minValue = _ref5.minValue;
return (maxValue - minValue) * 100 / (max - min) + "% 100%";
}, function (_ref6) {
var width = _ref6.width;
return width + "px" || "100%";
});
export var Range = styled(InputRange).withConfig({
displayName: "styled__Range",
componentId: "sc-y2g216-2"
})(["pointer-events:none;position:absolute;height:0;outline:none;width:100%;&::-webkit-slider-thumb{pointer-events:all;}"]);