The usual ionic range has a set minimum and maximum value for the possible range of values.
<ion-range min="1" max="20" ...>
However, I am in need of a custom range where the slider should only allow these specific values: {1, 5, 7, 20}.
Is there a way to accomplish this?
Experimenting with the (ionChange) event of the Range component proved challenging for me, so I decided to take a different approach. By utilizing buttons and a disabled range element, you can create your own custom range functionality. Check out this plunker for an example.
In the provided code snippet, you have the option to increase or decrease the value using buttons.
<ion-content>
<ion-list>
<ion-list-header>
Your awesome value <ion-badge item-right>{{ value }}</ion-badge>
</ion-list-header>
<ion-item>
<ion-range disabled="true" step="1" min="1" max="20" [(ngModel)]="value">
<ion-label range-left><button outline round small (click)="decrease()">-</button></ion-label>
<ion-label range-right><button outline round small (click)="increase()">+</button></ion-label>
</ion-range>
</ion-item>
</ion-list>
</ion-content>
You can also restrict the range values in your code to specific numbers like 1, 5, 7, and 20 as shown in the example.
import { Component } from "@angular/core";
@Component({
templateUrl: "home.html"
})
export class HomePage {
private prevValue: number;
private value: number;
constructor() {
this.value = 1;
}
public decrease() {
if(this.value == 5) {
this.value = 1;
} else if(this.value == 7) {
this.value = 5;
} else if(this.value == 20) {
this.value = 7;
}
}
public increase() {
if(this.value == 1) {
this.value = 5;
} else if(this.value == 5) {
this.value = 7;
} else if(this.value == 7) {
this.value = 20;
}
}
}
Improving upon sebaferreras' answer.
Start by including a slider with (ionChange) and ensure the min/max values align with your custom steps [1,5,7,20] = 0-3. You can also dynamically calculate the array length.
The {{customSteps}} will display your customized values
The HTML:
<ion-navbar>
<ion-title>
Slider with uneven steps
</ion-title>
</ion-navbar>
<ion-content>
<ion-badge item-right>{{customSteps}}</ion-badge>
<ion-range
min="0"
max="3"
[(ngModel)]="slider"
(ionChange)="watchSlider()"
snaps="true">
</ion-range>
</ion-content>
Your watch function will convert the slider values to your custom values. Note that the custom steps array must have the same length as your slider in order to dynamically match numbers.
The code:
import {Component} from '@angular/core';
@Component({
templateUrl:"home.html",
})
export class HomePage {
slider: any = 1; //Holding the current slider values
customSteps: any; //Storing the custom values
constructor() {
this.watchSlider(); //initializing the slider
}
watchSlider(){
//Converting slider steps to custom values
const steps = [1, 5, 7, 20];
this.customSteps = steps[this.slider];
}
}
My Goal: I need to retrieve data via HTTP only once and then share it across my entire application as properties. However, since HTTP requests can be slow, my app should continuously monitor these properties. The challenge is to ensure that the HTTP call i ...
I recently embarked on developing a straightforward Angular app that requires basic CRUD operations with a backend database. To handle HTTP actions, I've implemented a service. Within the service, there are functions such as: ... getPublicEvent(): ...
I've encountered an issue with my angular application which is packed in a war file and deployed on the tomcat server using the URL http://localhost:8080/webc/ The problem arises when trying to access the deployed app via the URL http://localhost:808 ...
There are a maximum of 12 inputs that represent the same entities or objects but with varying integer values. These values directly impact the final result displayed to the user. Whenever any of the input values change, a function needs to be triggered to ...
Is there a way to enforce importing components from index.ts within the src/components directory using eslint rules or plugins? // index.ts (src/components/Forms) export { Input } from './Input'; export { CheckBox } from './CheckBox'; ...
interface Person{ name:string, age:number, gender?:string } interface Employee extends Person{ name='John Doe', age:number } I am trying to achieve the above structure for a person and employee in TypeScript. I am also curious if something simi ...
Ensuring the correctness of the API: ''' https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=[API_KEY] ''' source Verifying my API Key: https://i.sstatic.net/N4daZ.png The request made from a component: import { In ...
When a single class binding is applied to mat-card, the mat-card class does not bind. <mat-card cdkDropList [className]="getClassName(item)"><!-- some content--></mat-card> In this scenario, the class name appears as something ...
I recently had a javascript code that I'm now attempting to convert into typescript route.get('/order', async(req,res) => { var sessionData = req.session; if(typeof sessionData.user === 'undefined') { ...
We are currently working on transferring data from one component to another using the approach outlined below. We want to display an error message when there is no data available. <div *ngIf="showGlobalError"> <h6>The reporting project d ...
As a beginner in rxjs and declarative programming, please forgive me if this question seems naive! I am working with Typescript, attempting to create functionality similar to that of a digital register. I have two input boolean observables, A and B, as we ...
Launching a training project that requires Popper.Js in its features has been quite challenging. Despite following Bootstrap's documentation on how to implement Popper.Js, I have encountered difficulties. As per Bootstrap's docs, I tried initiat ...
In my current angular project, I have included the necessary imports in the component.ts file in the specific order of d3, crossfilter2, dc, and leaflet. Additionally, I have added the cdn for dc-leaflet.js in the index.html file. Despite these steps, wh ...
Recently, I have ventured into the world of React-native after having experience with reactjs+typescript. Wanting to test its capabilities, I decided to set up a simple project. My tool of choice for development is VS Code. After following a basic tutoria ...
I need to toggle the spinner visibility while downloading a PDF file. Here is the code in my Html component: <div > <ng-container *ngFor="let p of selectedStudent.photos.list; let i = index"> <div *ngIf="p.even ...
After creating a web page and adding Bootstrap styling, I attempted to customize the Bootstrap variables, but encountered an issue where it did not seem to work despite no errors being displayed. I followed a tutorial on YouTube meticulously, but to no av ...
In my "home" component, I have an array called mangas containing a list of objects that I iterate through like this: <div *ngFor="let manga of mangas"> <h1> {{ manga.title }} </h1> <button routerLink="/manga/{{ man ...
I have been attempting to display a checkbox within my Angular 2 application, however, it doesn't seem to be appearing. What are some potential reasons for this issue? <md-checkbox [checked]="true">Unchecked</md-checkbox> <md-checkbox ...
I have a challenge where I need to pass multiple sets of sanity data into a component, but I am restricted to using getServerSideProps only once. How can I work around this limitation to include more than one set of sanity data? pages > members.tsx exp ...
I have not declared an email control in the HTML file, but I have declared it in my form group. I want to set the email value that is receiving in the customers to the email control. <form class="form-row" [formGroup]="form"> ...