Slider with long labels

[smartm0use]

Hello, I need to create a slider that has steps with long labels.

Having a look at this https://jsfiddle.net/h98vpkfs I mean replacing 5, 10, 15 etc. with something like "First day of something" or "Day of some event" and so on.

Is there any way to reach that? Maybe with tooltip, but how?

[jamessampford]

This sounds better suited for a range calendar as between 2 dates?

https://fomantic-ui.com/modules/calendar.html#range

[smartm0use]

Yes, but I need to have it as a slider, as used in websites like skyscanner.
(Anyway, even with calendar I do not have ways to show long labels instead of the number of the day).

[lubber-de]

You can use the custom interpreted labels feature https://fomantic-ui.com/modules/slider.html#custom-interpreted-labels
See http://jsfiddle.net/L4htmsno/

var labels = [
	"First day of something",
  "In the middle of nowhere",
  "Lost in space",
  "End of the world"
];
$('#interpretedlabel')
  .slider({
   	min: 0,
    max: 3,
    start: 0,
    end: 3,
    step: 1,
    interpretLabel: function(value) {
      return labels[value];
    }
  })
;

[smartm0use]

Thank you for your suggestion, but I'm afraid I can't use this because I have to create a very small slider:

Can't I use tooltip in this case?

[lubber-de]

Sure 😄
See http://jsfiddle.net/nos06d5e/

[smartm0use]

Wow, perfect! Thank you so much!

[smartm0use]

Shouldn't I add an input tag like this:

<div class="ui input">
  <input type="text" id="slider-input-1" disabled="">
</div>

As seen here?

[lubber-de]

The input tag is only there to show the values in the docs. To fetch the values you use the onChange callback or the get value behavior

[smartm0use]

In a range slider how to get from the onChange callback the range values, instead of value of the last move? I mean the min and max value selected by the user.

In addition, since I'm wrapping this in an Angular component, do you think I can add an hidden input element to bind it to a formControl?

[smartm0use]

I have edited my last post, sorry for double posting now.

[lubber-de]

In a range slider how to get from the onChange callback the range values, instead of value of the last move? I mean the min and max value selected by the user.

The onChange callback provides 3 parameters: range (= difference between firstValue and lastValue), firstValue, lastValue

onChange: function(range, firstVal, secondVal) {
}

[smartm0use]

Great! Thank you, I cannot find it in the documentation.

[smartm0use]

Hello again, sorry for keeping post here but I have one more question.
I noticed that the onChange callback is triggered even if the slider is not moved.
Both onChange and onMove are triggered just clicking on the slider, without any values change.
How to trigger onChange only when the value are different from previous change?

[lubber-de]

Sounds like a bug we have to investigate. Please create a new issue for that. Thanks