Estoy tratando de crear un control deslizante que solo tenga algunas opciones específicas para elegir en lugar de un rango completo. Esto podría lograrse con un menú desplegable, pero creo que un control deslizante se vería mucho mejor. Estoy en un proyecto angular y estamos usando Material. No puedo encontrar una manera de obtener un control deslizante Material o un control deslizante HTML <input> normal para usar otra cosa que no sean números. A continuación se muestra mi intento de hacerlo.
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; }Esto establecerá la etiqueta en la fecha seleccionada (en teoría). En este momento, muestra el valor actual del control deslizante, que es un número.
EDITAR: Si bien no he resuelto mi problema exactamente, esto puede ser útil para otras personas que no necesitan un paso variable (o ningún paso). https://stackblitz.com/edit/angular-ktxxwx?file=src/app/slider-overview-example.ts
desafío interesante. Creo que debería reconsiderar el uso de number ya que existe algo llamado Unix Epoch Time . Puedes leer más sobre esto aquí . Básicamente es una representación del tiempo en términos de segundos desde el 1 de enero de 1970.
Puede usar esto para definir los valores de sus diferentes opciones. Y luego elija el valor de paso apropiado.
Puede usar la entrada displayWith de un control deslizante de tapete para definir la etiqueta que debe mostrarse de acuerdo con el valor seleccionado del control deslizante.
La documentación del componente Slider proporciona un StackBlitz https://stackblitz.com/angular/akebpxkvdvq?file=src%2Fapp%2Fslider-formatting-example.ts donde puede ver un método de formato utilizado para transformar valores mayores de 1000 con una 'k '.
Estoy bastante seguro de que puede encontrar una forma de usar un método de formato para responder a su problema.
Tal vez pueda definir un Mapa que contenga todos sus valores aceptables usando este tipo de formato (como json, por ejemplo)
{value1:{labelToDisplay,actualDateObject},value2:{labelToDisplay,actualDateObject}}A través de displayWith input, puede mostrar map.get(pickerValue).labelToDisplay y, si necesita manipular la fecha real, puede usar map.get(pickerValue).actualDateObject
Editar: puede encontrar una prueba de concepto (realmente un borrador básico) en este stackblitz https://stackblitz.com/edit/angular-x1egtw?file=src%2Fapp%2Fslider-formatting-example.ts