Fomantic-ui: Diffrent styling for the slider module

[CmdrMahesh]

Feature Request

I am using the slider module and it works perfectly and I wonder if there is any way to change the position of the labels being displayed on the slider.

For example, I want something like this:

And we have this:

I have tried some modifications at one of my demo servers and here is the link to the page.

On the page, I have a filter slider named SYMM. which has a Very Good label, and unfortunately, my CSS skill is not so good that's why it been overlapped by the slider nodes.

So to avoid my confusing CSS codes I like to ask if there is any way to have the slider as I want?

[ko2in]

You can override as following in slider.overrides:

.ui.labeled.slider > .labels .label {
    display: inline-flex;
    position: absolute;
    transform: translate(-50%, -100%);
    white-space: nowrap;
}

Here's the overrides for slider in default theme (https://github.com/fomantic/Fomantic-UI/blob/develop/src/themes/default/modules/slider.overrides).

Here's the result with white-space: nowrap.

Of course, long label is not good to use when you've too many options with narrow spaces between them.

[CmdrMahesh]

@ko2in , Thank you for the fast reply.

I will try this one and update you by tomorrow morning.

Once again, thanks.

[exoego]

I think adding this variation to FUI is valuable, since long text labels like this poll seem very common use case.

[ko2in]

Yes. It sounds reasonable. Will you prepare PR? Or should I submit this?

[jamessampford]

Couldn't we add a class to the labels to allow them to appear above or below the slider, rather than using override?

Something like .labels.bottom.aligned? Could we also potentially apply to a label itself, so the labels could potentially rotate (if wanted) to be above or below, eg .labels .label.bottom.aligned (top/above alignment could be default for comparability)

[CmdrMahesh]

@jamessampford The class for aligning the label at either top or the bottom sounds an extremely good idea and that will be much easy for backend devs like me.

[CmdrMahesh]

Thank you guys, that one fixed my issue and I wonder if there is some way to avoid CSS of other libraries being effecting the CSS of the FU/SU.

Anyway, you guys were helpful, and adding PR will surely helpful to others in the future.

[lubber-de]

Implemented by #1631