[
  {
    "path": ".babelrc",
    "content": "{\n  \"presets\": [\"@babel/preset-env\"],\n  \"plugins\": [\n    \"transform-object-rest-spread\",\n    \"transform-react-jsx\",\n    \"@babel/plugin-proposal-class-properties\"\n  ]\n}\n"
  },
  {
    "path": ".gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n/.idea\n/dist\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2020 Elizaveta Shkodkina\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "### react-timeline-range-slider\n![demo gif](./demo.gif)\n### Installation\n\n     npm i react-timeline-range-slider\n### Props\n\n| Prop | Type | Default | Description|\n|--|--|--|--|\n| timelineInterval | array |[startOfToday(), endOfToday()]|Interval to display|\n|selectedInterval|array|[new Date(), addHours(new Date(), 1)]|Selected interval inside the timeline|\n|disabledIntervals|array|[]|Array of disabled intervals inside the timeline|\n|containerClassName|string||ClassName of the wrapping container|\n|step|number|1800000|Number of milliseconds between steps (the default value is 30 minutes)|\n|ticksNumber|number|48|Number of steps on the timeline (the default value is 30 minutes)|\n|error|bool|false|Is the selected interval is not valid|\n|mode|int/function|3|The interaction mode. Value of 1 will allow handles to cross each other. Value of 2 will keep the sliders from crossing and separated by a step. Value of 3 will make the handles pushable and keep them a step apart. ADVANCED: You can also supply a function that will be passed the current values and the incoming update. Your function should return what the state should be set as.|\n|formatTick|function|ms => format(new Date(ms), 'HH:mm')|Function that determines the format in which the date will be displayed|\n|onUpdateCallback|function|||\n|onChangeCallback|function|||\n### Example\n[Live demo](https://codesandbox.io/s/react-timeline-range-slider-ve7w2?file=/src/App.js)\n```javascript\nimport React from 'react'  \nimport { endOfToday, set } from 'date-fns' \nimport TimeRange from 'react-timeline-range-slider'  \n\nconst now = new Date()\nconst getTodayAtSpecificHour = (hour = 12) =>\n\tset(now, { hours: hour, minutes: 0, seconds: 0, milliseconds: 0 })\n\nconst selectedStart = getTodayAtSpecificHour()\nconst selectedEnd = getTodayAtSpecificHour(14)\n\nconst startTime = getTodayAtSpecificHour(7)\nconst endTime = endOfToday()\n\nconst disabledIntervals = [\n  { start: getTodayAtSpecificHour(16), end: getTodayAtSpecificHour(17) },\n  { start: getTodayAtSpecificHour(7), end: getTodayAtSpecificHour(12) },\n  { start: getTodayAtSpecificHour(20), end: getTodayAtSpecificHour(24) }\n]\n\nclass App extends React.Component {  \n  state = {  \n    error: false,  \n    selectedInterval: [selectedStart, selectedEnd],  \n  }\n\t\n  errorHandler = ({ error }) => this.setState({ error })  \n\n  onChangeCallback = selectedInterval => this.setState({ selectedInterval })  \n\n  render() {  \n    const { selectedInterval, error } = this.state  \n      return (  \n        <TimeRange\n          error={error}  \n          ticksNumber={36}  \n          selectedInterval={selectedInterval}  \n          timelineInterval={[startTime, endTime]}  \n          onUpdateCallback={this.errorHandler}  \n          onChangeCallback={this.onChangeCallback}\n          disabledIntervals={disabledIntervals}  \n        />\n      )  \n  }  \n}  \n\nexport default App\n```\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"react-timeline-range-slider\",\n  \"version\": \"1.4.1\",\n  \"description\": \"Time Slider component for React\",\n  \"author\": \"Elizaveta Shkodkina <lizashkodkina@gmail.com>\",\n  \"main\": \"dist/index.js\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/lizashkod/react-time-range-slider\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/lizashkod/react-time-range-slider\"\n  },\n  \"keywords\": [\n    \"react-component\",\n    \"react\",\n    \"slider\",\n    \"component\",\n    \"time-picker\",\n    \"react-slider\",\n    \"range-slider\",\n    \"range\"\n  ],\n  \"peerDependencies\": {\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\"\n  },\n  \"scripts\": {\n    \"start\": \"webpack --watch\",\n    \"build\": \"webpack\"\n  },\n  \"eslintConfig\": {\n    \"extends\": \"react-app\"\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  },\n  \"dependencies\": {\n    \"prop-types\": \"^15.7.2\",\n    \"d3-scale\": \"^3.2.3\",\n    \"date-fns\": \"^2.19.0\",\n    \"node-sass\": \"^5.0.0\",\n    \"react-compound-slider\": \"^3.3.1\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.13.10\",\n    \"@babel/plugin-proposal-class-properties\": \"^7.13.0\",\n    \"@babel/preset-env\": \"^7.13.12\",\n    \"@babel/preset-react\": \"^7.12.13\",\n    \"babel-loader\": \"^8.2.2\",\n    \"babel-plugin-transform-object-rest-spread\": \"^6.26.0\",\n    \"babel-plugin-transform-react-jsx\": \"^6.24.1\",\n    \"css-loader\": \"^5.1.3\",\n    \"sass-loader\": \"^10.0.0\",\n    \"style-loader\": \"^2.0.0\",\n    \"webpack\": \"^4.43.0\",\n    \"webpack-cli\": \"^3.3.12\"\n  }\n}\n"
  },
  {
    "path": "src/components/Handle.js",
    "content": "import PropTypes from 'prop-types'\nimport React from 'react'\n\nconst Handle = ({\n  error,\n  domain: [min, max],\n  handle: { id, value, percent = 0 },\n  disabled,\n  getHandleProps,\n}) => {\n  const leftPosition = `${percent}%`\n\n  return (\n    <>\n      <div className='react_time_range__handle_wrapper' style={{ left: leftPosition }} {...getHandleProps(id)} />\n      <div\n        role='slider'\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        className={`react_time_range__handle_container${disabled ? '__disabled' : ''}`}\n        style={{ left: leftPosition }}\n      >\n        <div className={`react_time_range__handle_marker${error ? '__error' : ''}`} />\n      </div>\n    </>\n  )\n}\n\nHandle.propTypes = {\n  domain: PropTypes.array.isRequired,\n  handle: PropTypes.shape({\n    id: PropTypes.string.isRequired,\n    value: PropTypes.number.isRequired,\n    percent: PropTypes.number.isRequired\n  }).isRequired,\n  getHandleProps: PropTypes.func.isRequired,\n  disabled: PropTypes.bool,\n  style: PropTypes.object,\n}\n\nHandle.defaultProps = { disabled: false }\n\nexport default Handle\n"
  },
  {
    "path": "src/components/KeyboardHandle.js",
    "content": "import PropTypes from 'prop-types'\nimport React from 'react'\n\nconst KeyboardHandle = ({ domain: [min, max], handle: { id, value, percent = 0 }, disabled, getHandleProps }) => (\n  <button\n    role='slider'\n    aria-valuemin={min}\n    aria-valuemax={max}\n    aria-valuenow={value}\n    className='react_time_range__keyboard_handle'\n    style={{\n      left: `${percent}%`,\n      backgroundColor: disabled ? '#666' : '#ffc400'\n    }}\n    {...getHandleProps(id)}\n  />\n)\n\nKeyboardHandle.propTypes = {\n  domain: PropTypes.array.isRequired,\n  handle: PropTypes.shape({\n    id: PropTypes.string.isRequired,\n    value: PropTypes.number.isRequired,\n    percent: PropTypes.number.isRequired\n  }).isRequired,\n  getHandleProps: PropTypes.func.isRequired,\n  disabled: PropTypes.bool\n}\n\nKeyboardHandle.defaultProps = { disabled: false }\n\nexport default KeyboardHandle\n"
  },
  {
    "path": "src/components/SliderRail.js",
    "content": "import React from 'react'\nimport PropTypes from 'prop-types'\n\nexport const SliderRail = ({ getRailProps }) => (\n  <>\n    <div className='react_time_range__rail__outer' {...getRailProps()} />\n    <div className='react_time_range__rail__inner' />\n  </>\n)\n\nSliderRail.propTypes = { getRailProps: PropTypes.func.isRequired }\n\nexport default SliderRail\n"
  },
  {
    "path": "src/components/Tick.js",
    "content": "import { getMinutes } from 'date-fns'\nimport PropTypes from 'prop-types'\nimport React from 'react'\n\nconst Tick = ({ tick, count, format }) => {\n  const isFullHour = !getMinutes(tick.value)\n\n  const tickLabelStyle = {\n    marginLeft: `${-(100 / count) / 2}%`,\n    width: `${100 / count}%`,\n    left: `${tick.percent}%`,\n  }\n\n  return (\n    <>\n      <div\n        className={`react_time_range__tick_marker${isFullHour ? '__large' : ''}`}\n        style={{ left: `${tick.percent}%` }}\n      />\n      {isFullHour && (\n        <div className='react_time_range__tick_label' style={tickLabelStyle}>\n          {format(tick.value)}\n        </div>\n      )}\n    </>\n  )\n}\n\nTick.propTypes = {\n  tick: PropTypes.shape({\n    id: PropTypes.string.isRequired,\n    value: PropTypes.number.isRequired,\n    percent: PropTypes.number.isRequired\n  }).isRequired,\n  count: PropTypes.number.isRequired,\n  format: PropTypes.func.isRequired\n}\n\nTick.defaultProps = { format: d => d }\n\nexport default Tick\n"
  },
  {
    "path": "src/components/Track.js",
    "content": "import PropTypes from 'prop-types'\nimport React from 'react'\n\nconst getTrackConfig = ({ error, source, target, disabled }) => {\n  const basicStyle = {\n    left: `${source.percent}%`,\n    width: `calc(${target.percent - source.percent}% - 1px)`,\n  }\n\n  if (disabled) return basicStyle\n\n  const coloredTrackStyle = error\n    ? {\n      backgroundColor: 'rgba(214,0,11,0.5)',\n      borderLeft: '1px solid rgba(214,0,11,0.5)',\n      borderRight: '1px solid rgba(214,0,11,0.5)',\n    }\n    : {\n      backgroundColor: 'rgba(98, 203, 102, 0.5)',\n      borderLeft: '1px solid #62CB66',\n      borderRight: '1px solid #62CB66',\n    }\n\n  return { ...basicStyle, ...coloredTrackStyle }\n}\n\nconst Track = ({ error, source, target, getTrackProps, disabled }) => (\n  <div\n    className={`react_time_range__track${disabled ? '__disabled' : ''}`}\n    style={getTrackConfig({ error, source, target, disabled })}\n    {...getTrackProps()}\n  />\n)\n\nTrack.propTypes = {\n  source: PropTypes.shape({\n    id: PropTypes.string.isRequired,\n    value: PropTypes.number.isRequired,\n    percent: PropTypes.number.isRequired\n  }).isRequired,\n  target: PropTypes.shape({\n    id: PropTypes.string.isRequired,\n    value: PropTypes.number.isRequired,\n    percent: PropTypes.number.isRequired\n  }).isRequired,\n  getTrackProps: PropTypes.func.isRequired,\n  disabled: PropTypes.bool\n}\n\nTrack.defaultProps = { disabled: false }\n\nexport default Track\n"
  },
  {
    "path": "src/index.js",
    "content": "import React from 'react'\nimport PropTypes from 'prop-types'\nimport { scaleTime } from 'd3-scale'\nimport { Slider, Rail, Handles, Tracks, Ticks } from 'react-compound-slider'\nimport {\n  format,\n  addHours,\n  startOfToday,\n  endOfToday,\n  differenceInMilliseconds,\n  isBefore,\n  isAfter,\n  set,\n  addMinutes,\n} from 'date-fns'\n\nimport SliderRail from './components/SliderRail'\nimport Track from './components/Track'\nimport Tick from './components/Tick'\nimport Handle from './components/Handle'\n\nimport './styles/index.scss'\n\nconst getTimelineConfig = (timelineStart, timelineLength) => (date) => {\n  const percent = differenceInMilliseconds(date, timelineStart)/timelineLength * 100\n  const value = Number(format(date, 'T'))\n  return { percent, value }\n}\n\nconst getFormattedBlockedIntervals = (blockedDates = [], [startTime, endTime]) => {\n  if (!blockedDates.length) return null\n\n  const timelineLength = differenceInMilliseconds(endTime, startTime)\n  const getConfig = getTimelineConfig(startTime, timelineLength)\n\n  const formattedBlockedDates = blockedDates.map((interval, index) => {\n    let { start, end } = interval\n\n    if (isBefore(start, startTime)) start = startTime\n    if (isAfter(end, endTime)) end = endTime\n\n    const source = getConfig(start)\n    const target = getConfig(end)\n\n    return { id: `blocked-track-${index}`, source, target }\n  })\n\n  return formattedBlockedDates\n}\n\nconst getNowConfig = ([startTime, endTime])  => {\n  const timelineLength = differenceInMilliseconds(endTime, startTime)\n  const getConfig = getTimelineConfig(startTime, timelineLength)\n\n  const source = getConfig(new Date())\n  const target = getConfig(addMinutes(new Date(), 1))\n\n  return { id: 'now-track', source, target }\n}\n\nclass TimeRange extends React.Component {\n  get disabledIntervals () {\n    return getFormattedBlockedIntervals(this.props.disabledIntervals, this.props.timelineInterval)\n  }\n\n  get now () {\n    return getNowConfig(this.props.timelineInterval)\n  }\n\n  onChange = newTime => {\n    const formattedNewTime = newTime.map(t => new Date(t))\n    this.props.onChangeCallback(formattedNewTime)\n  }\n\n  checkIsSelectedIntervalNotValid = ([start, end], source, target) => {\n    const { value: startInterval } = source\n    const { value: endInterval } = target\n\n    if (startInterval > start && endInterval <= end || startInterval >= start && endInterval < end)\n      return true\n    if (start >= startInterval && end <= endInterval) return true\n\n    const isStartInBlockedInterval = start > startInterval && start < endInterval && end >= endInterval\n    const isEndInBlockedInterval = end < endInterval && end > startInterval && start <= startInterval\n\n    return isStartInBlockedInterval || isEndInBlockedInterval\n  }\n\n  onUpdate = newTime => {\n    const { onUpdateCallback } = this.props\n    const disabledIntervals = this.disabledIntervals\n\n    if (disabledIntervals?.length) {\n      const isValuesNotValid = disabledIntervals.some(({ source, target }) =>\n        this.checkIsSelectedIntervalNotValid(newTime, source, target))\n      const formattedNewTime = newTime.map(t => new Date(t))\n      onUpdateCallback({ error: isValuesNotValid, time: formattedNewTime })\n      return\n    }\n\n    const formattedNewTime = newTime.map(t => new Date(t))\n    onUpdateCallback({ error: false, time: formattedNewTime })\n  }\n\n  getDateTicks = () => {\n    const { timelineInterval, ticksNumber } = this.props\n    return scaleTime().domain(timelineInterval).ticks(ticksNumber).map(t => +t)\n  }\n\n  render() {\n    const {\n      sliderRailClassName,\n      timelineInterval,\n      selectedInterval,\n      containerClassName,\n      error,\n      step,\n      showNow,\n      formatTick,\n      mode,\n    } = this.props\n\n    const domain = timelineInterval.map(t => Number(t))\n\n    const disabledIntervals = this.disabledIntervals\n\n    return (\n      <div className={containerClassName || 'react_time_range__time_range_container' }>\n        <Slider\n          mode={mode}\n          step={step}\n          domain={domain}\n          onUpdate={this.onUpdate}\n          onChange={this.onChange}\n          values={selectedInterval.map(t => +t)}\n          rootStyle={{ position: 'relative', width: '100%' }}\n        >\n          <Rail>\n            {({ getRailProps }) =>\n              <SliderRail className={sliderRailClassName} getRailProps={getRailProps} />}\n          </Rail>\n\n          <Handles>\n            {({ handles, getHandleProps }) => (\n              <>\n                {handles.map(handle => (\n                  <Handle\n                    error={error}\n                    key={handle.id}\n                    handle={handle}\n                    domain={domain}\n                    getHandleProps={getHandleProps}\n                  />\n                ))}\n              </>\n            )}\n          </Handles>\n\n          <Tracks left={false} right={false}>\n            {({ tracks, getTrackProps }) => (\n              <>\n                {tracks?.map(({ id, source, target }) =>\n                  <Track\n                    error={error}\n                    key={id}\n                    source={source}\n                    target={target}\n                    getTrackProps={getTrackProps}\n                  />\n                )}\n              </>\n            )}\n          </Tracks>\n\n          {disabledIntervals?.length && (\n            <Tracks left={false} right={false}>\n              {({ getTrackProps }) => (\n                <>\n                  {disabledIntervals.map(({ id, source, target }) => (\n                    <Track\n                      key={id}\n                      source={source}\n                      target={target}\n                      getTrackProps={getTrackProps}\n                      disabled\n                    />\n                  ))}\n                </>\n              )}\n            </Tracks>\n          )}\n\n          {showNow && (\n            <Tracks left={false} right={false}>\n              {({ getTrackProps }) => (\n                <Track\n                  key={this.now?.id}\n                  source={this.now?.source}\n                  target={this.now?.target}\n                  getTrackProps={getTrackProps}\n                />\n              )}\n            </Tracks>\n          )}\n\n          <Ticks values={this.getDateTicks()}>\n            {({ ticks }) => (\n              <>\n                {ticks.map(tick => (\n                  <Tick\n                    key={tick.id}\n                    tick={tick}\n                    count={ticks.length}\n                    format={formatTick}\n                  />\n                ))}\n              </>\n            )}\n          </Ticks>\n        </Slider>\n      </div>\n    )\n  }\n}\n\nTimeRange.propTypes = {\n  ticksNumber: PropTypes.number.isRequired,\n  selectedInterval: PropTypes.arrayOf(PropTypes.object),\n  timelineInterval: PropTypes.arrayOf(PropTypes.object),\n  disabledIntervals: PropTypes.arrayOf(PropTypes.object),\n  containerClassName: PropTypes.string,\n  sliderRailClassName: PropTypes.string,\n  step: PropTypes.number,\n  formatTick: PropTypes.func,\n}\n\nTimeRange.defaultProps = {\n  selectedInterval: [\n    set(new Date(), { minutes: 0, seconds: 0, milliseconds: 0 }),\n    set(addHours(new Date(), 1), { minutes: 0, seconds: 0, milliseconds: 0 })\n  ],\n  timelineInterval: [startOfToday(), endOfToday()],\n  formatTick: ms => format(new Date(ms), 'HH:mm'),\n  disabledIntervals: [],\n  step: 1000*60*30,\n  ticksNumber: 48,\n  error: false,\n  mode: 3,\n}\n\nexport default TimeRange\n"
  },
  {
    "path": "src/styles/index.scss",
    "content": "$react-time-range--gray: #C8CACC;\n$react-time-range--highlight-tap: #000000;\n$react-time-range--rail-bg: #F5F7FA;\n$react-time-range--handle-bg: #FFFFFF;\n$react-time-range--handle-bg--disabled: #666;\n$react-time-range--track--valid: rgb(98, 203, 102);\n$react-time-range--track--not-valid: rgb(214, 0, 11);\n$react-time-range--tick-label: #77828C;\n$react-time-range--track--disabled: repeating-linear-gradient( -45deg, transparent, transparent 3px, #D0D3D7 4px, #D0D3D7 2px);\n\n.react_time_range__time_range_container {\n  padding: 30px 10% 0;\n  height: 70px;\n  width: 90%;\n  box-sizing: border-box;\n}\n\n.react_time_range__keyboard_handle {\n  position: absolute;\n  transform: translate(-50%, -50%);\n  z-index: 3;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3);\n}\n\n.react_time_range__track {\n  position: absolute;\n  transform: translate(0%, -50%);\n  height: 50px;\n  cursor: pointer;\n  transition: background-color .15s ease-in-out, border-color .15s ease;\n  z-index: 3;\n  &__disabled {\n    @extend .react_time_range__track;\n    z-index: 1;\n    border-left: 1px solid $react-time-range--gray;\n    border-right: 1px solid $react-time-range--gray;\n    background: $react-time-range--track--disabled;\n  }\n}\n\n.react_time_range__rail {\n  &__outer {\n    position: absolute;\n    width: 100%;\n    height: 50px;\n    transform: translate(0%, -50%);\n    cursor: pointer;\n  }\n  &__inner {\n    position: absolute;\n    width: 100%;\n    height: 50px;\n    transform: translate(0%, -50%);\n    pointer-events: none;\n    background-color: $react-time-range--rail-bg;\n    border-bottom: 1px solid $react-time-range--gray;\n  }\n}\n\n.react_time_range__handle {\n  &_wrapper {\n    position: absolute;\n    transform: translate(-50%, -50%);\n    -webkit-tap-highlight-color: $react-time-range--highlight-tap;\n    z-index: 6;\n    width: 24px;\n    height: 24px;\n    cursor: pointer;\n    background-color: transparent;\n  }\n  &_container {\n    position: absolute;\n    display: flex;\n    transform: translate(-50%, -50%);\n    z-index: 4;\n    width: 10px;\n    height: 24px;\n    border-radius: 4px;\n    box-shadow: 0 0 3px rgba(0,0,0, 0.4);\n    background-color: $react-time-range--handle-bg;\n    &__disabled {\n      @extend .react_time_range__handle_container;\n      background-color: $react-time-range--handle-bg--disabled;\n    }\n  }\n  &_marker {\n    width: 2px;\n    height: 12px;\n    margin: auto;\n    border-radius: 2px;\n    background-color: $react-time-range--track--valid;\n    transition: background-color .2s ease;\n    &__error {\n      @extend .react_time_range__handle_marker;\n      background-color: $react-time-range--track--not-valid;\n    }\n  }\n}\n\n.react_time_range__tick {\n  &_marker {\n    position: absolute;\n    margin-top: 20px;\n    width: 1px;\n    height: 5px;\n    background-color: $react-time-range--gray;\n    z-index: 2;\n    &__large {\n      @extend .react_time_range__tick_marker;\n      margin-top: 15px;\n      height: 10px;\n    }\n  }\n  &_label {\n    position: absolute;\n    margin-top: 28px;\n    font-size: 10px;\n    text-align: center;\n    z-index: 2;\n    color: $react-time-range--tick-label;\n    font-family: sans-serif;\n  }\n}\n"
  },
  {
    "path": "webpack.config.js",
    "content": "const path = require('path')\n\nmodule.exports = {\n  mode: 'production',\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'index.js',\n    library: 'react-timeline-range-slider',\n    libraryTarget: 'commonjs2'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        include: path.resolve(__dirname, 'src'),\n        exclude: /node_modules/,\n        use: {\n          loader: 'babel-loader',\n          options: {\n            presets: ['@babel/preset-react', \"@babel/preset-env\"]\n          }\n        }\n      }, {\n        test: /\\.s[ac]ss$/i,\n        use : [ 'style-loader', 'css-loader', 'sass-loader']\n      },\n    ]\n  },\n  externals: {\n    'react': 'commonjs react'\n  }\n};\n"
  }
]