ui-neu/dist/components/forms/Slider.js

Neu UI, a responsive React component library.

import _taggedTemplateLiteral from "/home/runner/work/neu_ui/neu_ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral";

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */\n  width: 100%; /* Specific width is required for Firefox. */\n  background: transparent; /* Otherwise white in Chrome */\n  margin-bottom: 2rem; /* for demo mainly */\n\n  ::-webkit-slider-thumb {\n    -webkit-appearance: none;\n  }\n\n  :focus {\n    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */\n  }\n\n  ::-ms-track {\n    width: 100%;\n    cursor: pointer;\n    /* Hides the slider so custom styles can be added */\n    background: transparent;\n    border-color: transparent;\n    color: transparent;\n  }\n\n  ::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: 24px;\n    width: 24px;\n    border-radius: 24px;\n    background: #edf2f4;\n    cursor: pointer;\n    margin-top: -8px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */\n    box-shadow: 6px 6px 10px 0 rgba(0, 0, 0, 0.2),\n      -8px -8px 16px 0 rgba(255, 255, 255, 0.5);\n  }\n\n  ::-moz-range-thumb {\n    box-shadow: 6px 6px 10px 0 rgba(0, 0, 0, 0.2),\n      -8px -8px 16px 0 rgba(255, 255, 255, 0.5);\n    border: none;\n    height: 24px;\n    width: 24px;\n    border-radius: 24px;\n    background: #edf2f4;\n    cursor: pointer;\n  }\n\n  ::-ms-thumb {\n    box-shadow: 6px 6px 10px 0 rgba(0, 0, 0, 0.2),\n      -8px -8px 16px 0 rgba(255, 255, 255, 0.5);\n    height: 24px;\n    width: 24px;\n    border-radius: 24px;\n    background: #edf2f4;\n    cursor: pointer;\n  }\n\n  ::-webkit-slider-runnable-track {\n    width: 100%;\n    height: 0.5rem;\n    cursor: pointer;\n    border-radius: 0.5rem;\n    background-color: rgba(204, 218, 226, 0.349);\n    box-shadow: inset -8px -8px 16px 0px rgba(255, 255, 255, 0.5),\n      inset 6px 6px 10px 0px rgba(0, 0, 0, 0.2);\n  }\n\n  :focus::-webkit-slider-runnable-track {\n    background-color: rgba(204, 218, 226, 0.349);\n  }\n\n  ::-moz-range-track {\n    width: 100%;\n    height: 0.5rem;\n    cursor: pointer;\n    border-radius: 0.5rem;\n    background-color: rgba(204, 218, 226, 0.349);\n    box-shadow: inset -8px -8px 16px 0px rgba(255, 255, 255, 0.5),\n      inset 6px 6px 10px 0px rgba(0, 0, 0, 0.2);\n  }\n\n  ::-ms-track {\n    width: 100%;\n    height: 0.8rem;\n    cursor: pointer;\n    background: transparent;\n    border-color: transparent;\n    border-width: 16px 0;\n    color: transparent;\n    margin-top: -8px;\n  }\n\n  ::-ms-fill-lower {\n    background-color: rgba(204, 218, 226, 0.349);\n    border-radius: 0.8rem;\n    box-shadow: inset -8px -8px 16px 0px rgba(255, 255, 255, 0.5),\n      inset 6px 6px 10px 0px rgba(0, 0, 0, 0.2);\n  }\n\n  :focus::-ms-fill-lower {\n    background-color: rgba(204, 218, 226, 0.349);\n  }\n\n  ::-ms-fill-upper {\n    background-color: rgba(204, 218, 226, 0.349);\n    border-radius: 0.8rem;\n    box-shadow: inset -8px -8px 16px 0px rgba(255, 255, 255, 0.5),\n      inset 6px 6px 10px 0px rgba(0, 0, 0, 0.2);\n  }\n\n  :focus::-ms-fill-upper {\n    background-color: rgba(204, 218, 226, 0.349);\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

import React from "react";
import styled from "styled-components";
var StyledRangeInput = styled.input.attrs({
  type: "range"
})(_templateObject());
export var Slider = function Slider(_ref) {
  var min = _ref.min,
      max = _ref.max;
  return /*#__PURE__*/React.createElement(StyledRangeInput, {
    min: min,
    max: max
  });
};
Slider.defaultProps = {
  min: 0,
  max: 100
};