Label as a value indicator

[liorpr]

it would be nice to have a label floating around the slide to indicate its value.

[darioseidl]

You can do by wrapping it in a Form.Field, e.g.

import { Slider } from 'react-semantic-ui-range';
import { Form } from 'semantic-ui-react';

...

const { input, min, max, step } = props;

<Form.Field
    {...input}
    label={input.value}
    control={Slider}
    color="grey"
    settings={{
        start: input.value,
        min,
        max,
        step: step || 1,
        value: input.value,
        onChange: input.onChange,
    }}
/>

(The input props come form redux-form in this example.)

[nihey]

Since the project looks abandoned for some time, I've made my own version with this support, it is available under "@kassellabs/react-semantic-ui-range"

My company will use this fork project, so we will update it when we need it, so you can expect SemVer and a relative API stability if you plan to use this.

The tooltip style customization is totally up to the project that uses it to decide, In our case, we're using it like this:

<Slider
  value={value}
  discrete={discrete}
  tooltip={(currentValue) => (
    <SliderTooltip position={tooltipPosition} value={currentValue} />
  )}
  style={{
    trackFill: {
      backgroundColor: '#007EA7',
    },
  }}
  settings={{
    tooltipPosition,
    start: value,
    max,
    min,
    step,
    onChange,
  }}
/>

[SimonGolms]

@nihey kudos for your work! Unfortunately I cannot create issues in your linked repo... therefore here a two notes from my side:

• the documentation is not up to date and it is hard to find out possibilities and functionalities, e.g. where does <SliderTooltip /> coming from? I would appreciate it if you could update them.
• Using multiple thumbs is not possible and throws the following error

<Slider multiple min={0} max={10} start={[1, 5]} />

// Error Message
slider.js?33c2:120 Uncaught TypeError: Cannot read property 'some' of undefined
    at Slider.isDifferentArrays (slider.js?33c2:120)
    at Slider.UNSAFE_componentWillReceiveProps (slider.js?33c2:78)
    at callComponentWillReceiveProps (react-dom.development.js?61bb:12976)
    at updateClassInstance (react-dom.development.js?61bb:13178)
    at updateClassComponent (react-dom.development.js?61bb:17107)
    at beginWork (react-dom.development.js?61bb:18620)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)
    at invokeGuardedCallback (react-dom.development.js?61bb:292)
    at beginWork$1 (react-dom.development.js?61bb:23203)

[nihey]

@SimonGolms Thanks for your feedback!

About the notes:

the documentation is not up to date and it is hard to find out possibilities and functionalities, e.g. where does <SliderTooltip /> coming from? I would appreciate it if you could update them.

The <SliderTooltip /> is a component that we've created. We've left open to whoever uses the lib to decide the style of the tooltip. In out specific case, we've used a component like this:

// SliderTooltip.js
// Uses semantic-ui's `popup` styles as a base
const SliderTooltip = ({ position, content }) => (                                
  <div className={`ui ${position} center popup visible slider-tooltip`}>          
    { content }                                                                   
  </div>                                                                          
);

/* SliderTooltip.styl */
.ui.popup.slider-tooltip {                                                     
  position: relative;                                                          
}

It serves us well on our needs.

Using multiple thumbs is not possible and throws the following error

Unfortunately, we have not implemented the tooltips for multiple thumbs, as all of our application sliders had just one thumb, we ended up only implementing what we needed.