Number inside the slider component balloon

[corganfuzz]

Inside the balloon of the slider component , can the number there be bound to data? I know it makes sense to have equal numbers of steps when you are sliding, however sometimes timelines for some projects makes no sense and have no equal range steps number.

for example for this timeline i have 1 day - 3 days - 7 days - 4 weeks - 12 weeks. obviously this time frame makes no sense. so I will bind the value of the slider to a label to make this possible, and I will hide the balloon.

Since the balloon is not showing. can the number inside that balloon be bound if I decide to show it ?

Thanks

[Aleksandyr]

@corganfuzz I think that your approach is not achievable right now.
But could you give us more details and real case scenarios where we could apply this just to understand clearer what you are trying to achieve in order to be sure that we could log your proposal as feature request and to be implemented in the future.

[corganfuzz]

Well...It's simple.

When it comes down to time ranges within calendars and sliders , most of the time projects require ranges that are not the same.

While some projects stakeholders will say, "I want data for every single day or every 3 days or every 5 days" (range is the same) there are others that will require something like this "I want data for the past 3 days, the past 1 week, the past 12 weeks and yesterday". In which case equal range makes no sense. So, to be able to select, specify and see your own data range is a need

I know even angular material cannot do this. I'm also considering the calendar component but I see that it also has an equal range prop. the ideal solution would be something like this , [in the case of the calendar of course] where I can select any range and the range gets shaded. but I digress , My main focus right now is the slider and the balloon value inside now.

[zdrawku]

Thank you for the clarifications @corganfuzz. Now it makes a perfect sense, I have discussed your question with @Aleksandyr, the idea is great, I am going to mark this question as Feature request and provide more clarifications below. This will help us to evaluete and prioritize the pending work and start working on it once it is added to our Roadmap.

Feature request:
Implement a custom range functionality, in order to define more flexible range scenarios. For example, create a slider with Season ranges (Winter, Spring, Summer, Fall) that will allow ranges between two seasons, for example Spring and Summer.

Possible Implementation:
We can create igxSlider step labels of type Array and when array is provided labels will be mapped to each step in index order. The underling values will be integers (as it is currently), from 0 to 3, which means 4 items, although each value will be associated with its index label.

Code example:

<igx-slider id="slider" [type]="sliderType.RANGE" [stepLabels]="seasons" [minValue]="0" [maxValue]="3"></igx-slider>
....

const seasons: Array<string> = ['Winter', 'Spring', 'Summer', 'Fall'];

Image:

@SlavUI I am assigning you to this Feature request, in order to keep track of it and plan further work.

[corganfuzz]

@SlavUI @zdrawku hey guys, any update on this ?. We sorta considering other packages for it. I personally don't wanna get my bundle too bloated. Thanks

[zdrawku]

@corganfuzz after further discussion with @SlavUI it was decided that we are going to start working on this next sprint (8th of April). You can track the progress of the development from here.
As for my last reply, I assume you agree with it and my understanding of your expactations are correct? Let us know if you have any comments.

[corganfuzz]

Yup. Agreed orher packages are doing exactly the same you are proposing. I would like to keep my bundle clean, so not external packages that dont belong to ignite-ui

[zdrawku]

Sounds great :) we have the same intention