[Graph] range slider styling fixes

dist/styles/range-slider.css

@@ -6,7 +6,16 @@
 }
 .range .range-slider .scale {
   position: absolute;
-  background-color: #555;
+  width: 100%;
+  height: 3px;
+  margin-top: 2px;
+  background-color: #d8d8d8;
+}
+.range .range-slider .scale-sel {
+  position: absolute;
+  background-color: #27c470;
+  width: 100%;
+  height: 7px;
 }
 .range .range-slider .knob {
   position: absolute;
@@ -16,6 +25,7 @@
   -ms-user-select: none;
   user-select: none;
   -o-user-select: none;
+  margin-top: -2px;
 }
 .range .range-slider .knob .button {
   margin-top: -3px;

dist/styles/range-slider.sass

@@ -6,7 +6,16 @@
 
     .scale
       position: absolute
-      background-color: #555
+      width: 100%
+      height: 3px
+      margin-top: 2px
+      background-color: #d8d8d8
+
+    .scale-sel
+      position: absolute
+      background-color: rgb(39, 196, 112)
+      width: 100%
+      height: 7px
 
     .knob
       position: absolute
@@ -17,11 +26,11 @@
       user-select: none
       -o-user-select: none
 
+      margin-top: -2px
+
       .button
         margin-top: -3px
 
-        //background: #f00
         background: #eee
         width: 30px
         height: 20px
-        //border-radius: 50%

src/Gargantext/Components/GraphExplorer/RangeControl.purs

@@ -29,7 +29,7 @@ rangeControlCpt = R.hooksComponent "RangeButton" cpt
   where
     cpt {caption, sliderProps} _ = do
       pure $
-        H.span {className: "range"}
+        H.span {className: "range text-center"}
           [ H.label {} [ H.text caption ]
           , RS.rangeSlider sliderProps
           ]

src/Gargantext/Components/RangeSlider.purs

@@ -65,6 +65,8 @@ rangeSliderCpt = R.hooksComponent "RangeSlider" cpt
 
       -- scale bar
       scaleElem <- (R.useRef null) :: R.Hooks (R.Ref (Nullable DOM.Element)) -- dom ref
+      -- scale sel bar
+      scaleSelElem <- (R.useRef null) :: R.Hooks (R.Ref (Nullable DOM.Element)) -- dom ref
       -- low knob
       lowElem <- (R.useRef null) :: R.Hooks (R.Ref (Nullable DOM.Element)) -- a dom ref to the low knob
       -- high knob
@@ -109,6 +111,7 @@ rangeSliderCpt = R.hooksComponent "RangeSlider" cpt
           Nothing -> destroy unit
       pure $ H.div { className, aria }
         [ renderScale scaleElem props value
+        , renderScaleSel scaleSelElem props value
         , renderKnob MinKnob lowElem  value props.bounds setDragKnob precision
         , renderKnob MaxKnob highElem value props.bounds setDragKnob precision
         ]
@@ -145,11 +148,22 @@ getDragScale knob scalePos lowPos highPos = do
 
 renderScale :: R.Ref (Nullable DOM.Element) -> Record Props -> Range.NumberRange -> R.Element
 renderScale ref {width,height} (Range.Closed {min, max}) =
-   H.div { ref, className, width, height, aria, style } []
+   H.div { ref, className, width, height, aria } []
   where
     className = "scale"
     aria = { label: "Scale running from " <> show min <> " to " <> show max }
-    style = { width: "100%", height: "3px" }
+
+renderScaleSel :: R.Ref (Nullable DOM.Element) -> Record Props -> Range.NumberRange -> R.Element
+renderScaleSel ref props (Range.Closed {min, max}) =
+    H.div { ref, className, style} []
+  where
+    className = "scale-sel"
+    style = {left: computeLeft, width: computeWidth}
+    percOffsetMin = Range.normalise props.bounds min
+    percOffsetMax = Range.normalise props.bounds max
+    computeLeft = (show $ 100.0 * percOffsetMin) <> "%"
+    computeWidth = (show $ 100.0 * (percOffsetMax - percOffsetMin)) <> "%"
+
 
 renderKnob :: Knob -> R.Ref (Nullable DOM.Element) -> Range.NumberRange -> Bounds -> R2.StateSetter (Maybe Knob) -> Int -> R.Element
 renderKnob knob ref (Range.Closed value) bounds set precision =