How to create a slider with specified dates to choose from

user_3251033 0
Viewed 205

I'm trying to create a slider that only has a few specific options to choose from instead of an entire range. This could be accomplished with a drop-down menu but I think a slider would look a lot better. I'm in an angular project and we're using Material. I can't find a way to get a Material slider or a normal HTML <input> slider to use anything other than numbers. Below is my attempt at it.

HTML

<div class="dateSlider">
  <input #dateSlider type="range" id="dateSlider" name="dateSlider"
   list="dateList" (change)= "dateChanged()" min={{value}} max = {{value3}}>
  <label for="dateSlider">{{currentDate}}</label>
</div>

<datalist id="dateList">
  <option>{{value}}</option>
  <option>{{value2}}</option>
  <option>{{value3}}</option>
</datalist>

TS

private value= new Date('September 27, 2021 14:23:00').toUTCString();
private value2= new Date('September 27, 2021 14:24:00').toUTCString();
private value3= new Date('September 27, 2021 14:25:00').toUTCString();
private currentDate;

dateChanged(){
  this.currentDate = this.dateSlider.nativeElement.value;
}

This will set the label to the selected date (in theory). Right now it displays the current value of the slider, which is a number.

EDIT: While I haven't solved my issue exactly, this may be helpful to other people that don't need a varying step (or no step at all). https://stackblitz.com/edit/angular-ktxxwx?file=src/app/slider-overview-example.ts

angular-material angular slider javascript
2 Answers

interesting challenge. I think you should reconsider using number as there exists something called Unix Epoch Time. You can read more about it here. Basically it is a representation of time in terms of seconds since 1st January of 1970.

You could use this to define the values of your different options. And the choose the appropriate step value.

user_30880010

You can use the displayWith input of a mat slider to define the label that should be displayed according to the selected value of the slider.

The Slider component documentation provides a StackBlitz https://stackblitz.com/angular/akebpxkvdvq?file=src%2Fapp%2Fslider-formatting-example.ts where you can see a formating method used to transform values greather than 1000 with a 'k'.

I'm pretty sure you can come up with a way of using a formatting method to answer your problem.

Maybe you can define a Map containing all your acceptable values using this kind of format (as json for example)

{value1:{labelToDisplay,actualDateObject},value2:{labelToDisplay,actualDateObject}}

Through displayWith input you can display the map.get(pickerValue).labelToDisplay and if you need to manipulate the actual date you can use map.get(pickerValue).actualDateObject

Edit: You can find a proof of concept (really a basic draft) on this stackblitz https://stackblitz.com/edit/angular-x1egtw?file=src%2Fapp%2Fslider-formatting-example.ts

user_115150800
Related