[Graph] some range slider styling

dist/styles/range-slider.css

-.range-slider {
+.range {
+  width: 400px;
+}
+.range .range-slider {
   position: relative;
 }
-.range-slider .scale {
+.range .range-slider .scale {
   position: absolute;
   background-color: #555;
 }
-.range-slider .knob {
+.range .range-slider .knob {
   position: absolute;
   cursor: pointer;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -o-user-select: none;
 }
-.range-slider .knob .button {
+.range .range-slider .knob .button {
   margin-top: -3px;
-  background: #f00;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
+  background: #eee;
+  width: 30px;
+  height: 20px;
 }
 
 /*# sourceMappingURL=range-slider.css.map */

dist/styles/range-slider.sass

-.range-slider
+.range
+  width: 400px
+
+  .range-slider
     position: relative
 
     .scale
@@ -8,11 +11,17 @@
     .knob
       position: absolute
       cursor: pointer
+      -moz-user-select: none
+      -webkit-user-select: none
+      -ms-user-select: none
+      user-select: none
+      -o-user-select: none
 
       .button
         margin-top: -3px
 
-      background: #f00
-      width: 10px
-      height: 10px
-      border-radius: 50%
+        //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 {}
+        H.span {className: "range"}
           [ H.label {} [ H.text caption ]
           , RS.rangeSlider sliderProps
           ]

src/Gargantext/Components/RangeSlider.purs

@@ -154,8 +154,10 @@ renderScale ref {width,height} (Range.Closed {min, max}) =
 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 =
   H.div { ref, tabIndex, className, aria, onMouseDown, style } [
-      H.div { className: "button" } []
-    , H.text $ text $ toFixed precision val
+      H.div { className: "button" }
+        [
+          H.text $ text $ toFixed precision val
+        ]
   ]
   where
     text (Just num) = num