show rangeslider when available

Author: nicolaskruchten

src/default_panels/StyleAxesPanel.js

@@ -9,14 +9,14 @@ import {
   Dropdown,
   FontSelector,
   Numeric,
+  NumericFraction,
   NumericFractionDomain,
   Radio,
   TextEditor,
   MenuPanel,
   Section,
   TraceRequiredPanel,
   AxesFold,
-  Fold,
   TraceTypeSection,
 } from '../components';
 
@@ -308,20 +308,15 @@ class StyleAxesPanel extends Component {
           </Section>
         </AxesFold>
 
-        <Fold name={_('Range Slider')}>
+        <AxesFold name={_('Range Slider')}>
           <Radio
             attr="rangeslider.visible"
             options={[
               {label: _('Show'), value: true},
               {label: _('Hide'), value: false},
             ]}
           />
-          <Numeric
-            label={_('Height')}
-            attr="rangeslider.thickness"
-            units="%"
-            step={0.1}
-          />
+          <NumericFraction label={_('Height')} attr="rangeslider.thickness" />
           <ColorPicker
             label={_('Background Color')}
             attr="rangeslider.bgcolor"
@@ -335,7 +330,7 @@ class StyleAxesPanel extends Component {
             label={_('Border Color')}
             attr="rangeslider.bordercolor"
           />
-        </Fold>
+        </AxesFold>
 
         <AxesFold name={_('Zoom Interactivity')}>
           <Radio