Handle label for slider

[ghost]

There is no guarantee in receiving a response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

I'm submitting a ...

[ ] bug report => Search github for a similar issue or PR before submitting
[x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports) Below a plunkr illustrating what's missing

http://plnkr.co/edit/42ArCp7XqfNnplBVoN1R?p=preview

Current behavior The min and max value of the slider's range can be added next to the slider, but there's no easy way to see what the selected range is. At this moment I print out the selected range below the slider but tha looks ugly.

Expected behavior It would be nice if the look and content of the handles could be custimzed. A nice improvement would be a label (some kind of tooltip that's always visible) above each handle, showing the value that has been selected with that handle.

What is the motivation / use case for changing the behavior? It would improve the usability of the slider component a lot if you would be able to see the selected value. I know a scale will be implemented but that can't be rendered if you can pick a range from 1 to 240 on a slider with a width of 300px...

Environment: Windows + WebStorm

• Angular version: 5.0.3

• PrimeNG version: 5.0.2

[dandohotaru]

while waiting for this feature to be baked in, I guess we could make use of a custom styled pseudo element, a data attribute and an angular directive to sync the changes back to the dom. https://stackblitz.com/edit/primeng-issues-slider-range Nevertheless, I'd love to see this feature built in as this would be very handy especially for range sliders.

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[enriquinho-catalan]

This feature is preventing me from using PrimeReact's Slider for my project.

[PaddingtonTheBear]

@enriquinho-catalan depending on your needs, you can create a wrapper around the Slider component that adds additional information and makes use of Prime Tooltips: https://primereact.org/tooltip/#reactive .

For example, if you wanted to show the min/max values as well as the current value on hover in a tooltip (or set it to all events), the following might help you (and you can modify it further to always show the current value of the slider). Note, I'm using react hook form for this.

export const PrimeSlider = ({ field, fieldState, config }: PrimeFieldProps) => {
    return (
        <span className="flex flex-wrap p-component mt-2">
            <Tooltip
                target={`.slider-${field.name}>.p-slider-handle`}
                content={`${field.value}`}
                position="top"
                event="hover"
            />

            <Slider
                id={field.name}
                value={field.value}
                min={config.min}
                max={config.max}
                onChange={(e) => field.onChange(e.value)}
                className={`${classNames({ 'p-invalid': fieldState.error })} w-full slider-${
                    field.name
                }`}
            />

            <span className="flex justify-content-between w-full mt-1">
                <small>{config.min}</small>
                <small>{config.max}</small>
            </span>
        </span>
    );
};

[smartm0use]

What about this enhancement?