fix old recent imagery

app/javascript/components/ui/slider-old/component.js

@@ -0,0 +1,48 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import RCSlider from 'rc-slider/lib/Slider';
+
+import 'rc-slider/assets/index.css';
+import './themes/slider-green.scss';
+
+const defaultSettings = {
+  min: 0,
+  max: 100,
+  defaultValue: 50,
+  tipFormatter: value => `${value}%`,
+  marksOnTop: false
+};
+
+class Slider extends PureComponent {
+  // eslint-disable-line react/prefer-stateless-function
+  render() {
+    const { className, settings, handleOnSliderChange } = this.props;
+    const sliderSettings = {
+      ...defaultSettings,
+      ...settings
+    };
+
+    return (
+      <div
+        className={`c-slider ${className || ''} ${
+          sliderSettings.marksOnTop ? '-marks-on-top' : ''
+        }`}
+      >
+        <RCSlider
+          {...sliderSettings}
+          onChange={d => {
+            handleOnSliderChange(d);
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+Slider.propTypes = {
+  className: PropTypes.string,
+  settings: PropTypes.object,
+  handleOnSliderChange: PropTypes.func.isRequired
+};
+
+export default Slider;

app/javascript/components/ui/slider-old/index.js

@@ -0,0 +1,3 @@
+import Component from './component';
+
+export default Component;

app/javascript/components/ui/slider-old/themes/slider-green.scss

@@ -0,0 +1,63 @@
+@import '~styles/settings';
+
+.theme-slider-green {
+  .rc-slider-rail {
+    background-color: transparent;
+  }
+
+  .rc-slider-track {
+    background-color: $green-gfw;
+    z-index: 2;
+  }
+
+  .rc-slider-dot {
+    bottom: rem(1px);
+    width: rem(2px);
+    height: rem(2px);
+    margin-left: 0;
+    background-color: #c4c4c4;
+    border: none;
+    border-radius: 0;
+    z-index: 1;
+  }
+
+  .rc-slider-handle {
+    box-shadow: 0 1px 3px 0 rgba($black, 0.29);
+    border: none;
+    border-radius: 2px;
+    z-index: 3;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: rem(4px);
+      height: rem(4px);
+      margin: auto;
+      background-color: $black;
+      border-radius: 100%;
+    }
+  }
+
+  .rc-slider-mark {
+    font-size: 10px;
+
+    .rc-slider-mark-text,
+    .rc-slider-mark-text-active {
+      color: $green-gfw;
+    }
+  }
+
+  &.-marks-on-top {
+    .rc-slider {
+      padding-top: rem(20px);
+    }
+
+    .rc-slider-mark {
+      top: 0;
+    }
+  }
+}

app/javascript/pages/map/recent-imagery/components/recent-imagery-settings/recent-imagery-settings-component.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import moment from 'moment';
 
 import Icon from 'components/ui/icon';
-import Slider from 'components/ui/slider';
+import Slider from 'components/ui/slider-old';
 import Carousel from 'components/ui/carousel';
 import Dropdown from 'components/ui/dropdown';
 import Datepicker from 'components/ui/datepicker';