I am using Ionic 5 in a project.
One thing I need is an input type number with up / down increment arrows like this image:
How can I do that as I cannot see any examples of that on the UI Components on their website.
Set the type attribute of ion-input to "number":
<ion-input type="number" value="5" min="1" max="9"></ion-input>
Related
Wish you are having a wonderful day,
I'm currently trying to apply some color to a simple slider range.
<Input class="range pr-6 bg-red-500"
type="range"
value="0" min="0"
max="1000"
onChange="rangeSlide(this.value)"
onmousemove="rangeSlide(this.value)"></Input>
It doesn't work at all to change the color like this, I also tried with text and border class.
I made some research and assume I should use this to change the slider bar : -webkit-slider-thumb
Like this :
.range::-webkit-slider-thumb {
background: #00fd0a;
}
However I wish to only use tailwind and dont apply style with pure css. if anyone have any insight to give me I would really appreciate it.
Here is what works for me, using accent-<color>-<number> :
<Input class="range pr-6 accent-red-500"
type="range"
value="0" min="0"
max="1000"
onChange="rangeSlide(this.value)"
onmousemove="rangeSlide(this.value)"></Input>
Also, link to the documentation if someone pass by and need more info : https://tailwindcss.com/docs/accent-color
I have a text input field and a sign up button. Since it's a password the user is going to enter in the field I want the input to be hidden. Any ideas on how to implement this feature?
I also want the field to be sort of disabled if the length of the password is less than 5 characters and longer than 12. (UPDATE: SOLVED IN BACKEND!)
I would be able to figure out at least the min and max length if I was using ''normal'' frontend styling, but I'm trying out Material UI for the first time and I can't really find the right information on how to make this work now.
<TextField
id="Password"
label="Password"
value={password}
onChange={handlePasswordChange}
variant="outlined"
/>
<Button variant="contained" color="primary">
Sign up!
</Button>
Add the type attribute like this:
<TextField
id="Password"
label="Password"
type="password"
value={password}
onChange={handlePasswordChange}
variant="outlined"
/>
I have this text box element.
<input type="text" name="textbox" class="box-input ng-pristine ng-scope md-input ng-empty ng-valid ng-valid-required ng-touched" ng-required="field.required" ng-model="$ctrl.model[field.nameField.uuid]" ng-disabled="::field.readOnly" id="input_15" aria-invalid="false" style="">
In protractor how should I use it to locate the element? I am not quite sure how to use ng-model="$ctrl.model[field.nameField.uuid]"
If you are using angular 2 or above by model might not work for you, see here.
You could still use the model attribute to identify your element through css like so
$('[ng-model="$ctrl.model[field.nameField.uuid]"]')
or
element(by.css('[ng-model="$ctrl.model[field.nameField.uuid]"]'))
try like this
let input = element(by.model('$ctrl.model[field.nameField.uuid]'));
I suggest to use unique ID if its possible, or some unique class styles leading to single element.
I am using Ionic 3 as a framework for my app. the app has a small configuration page. the user can choose different ranges via three dualknob sliders. the idea is, that those upper and lower limits are used to validate data which the user can enter on other pages. if a value is not between this range, the user gets an alert-toast.
im using firebase/angularfire2 as a database.
my html code with 3 sliders looks like this:
<ion-item>
<ion-label>Range 1</ion-label>
<ion-range min="-250" max="250" pin="true" dualKnobs="TRUE" [(ngModel)]="config.range1" color="secondary">
<ion-label range-left>-250g</ion-label>
<ion-label range-right>250g</ion-label>
</ion-range>
</ion-item>
<ion-item>
<ion-label>Range2</ion-label>
<ion-range min="0" max="200" pin="true" dualKnobs="TRUE" [(ngModel)]="config.range2" color="secondary">
<ion-label range-left>0</ion-label>
<ion-label range-right>200</ion-label>
</ion-range>
</ion-item>
<ion-item>
<ion-label>Range3</ion-label>
<ion-range min="0" max="200" pin="true" dualKnobs="TRUE" [(ngModel)]="config.range3" color="secondary">
<ion-label range-left>0</ion-label>
<ion-label range-right>200</ion-label>
</ion-range>
</ion-item>
I want to bind these three ranges to a single model to directly store it in firebase. So I created an interface, but I only manage to bind one range to this interface. the knobs of the other 2 ranges can't be moved and say "NaN" on their knobs. I tried to bind them to different elements of my interface called "config", but that didn't work. I also created fields called upper/lower in the limit but it didnt work.
Binding the ranges to three differentImodels worked. i then mapped it to my database model and saved them to firefase. but the other they round didnt work - the knobs didnt accept the values from the database.
thank you for your help.
Solved it myself by using a single model per Range-Slider and mapping the values in both directions to and from my database object before commiting.
slider1 = {} as any;
this.slider1.upper = (this.config.slider1max) ? this.config.slider1max : '100';
config.slider1max = this.slider1.upper;
I have an input field for users to input a monetary amount:
<input type="number" value="{{ order.amount }}" />
I chose the number input type because I want the number keyboard to appear when the field is clicked. I can't use type="text" pattern="[0-9]*" (suggested here) because that causes the number-only input pad to appear which doesn't have a decimal point.
Unfortunately, if the value attribute is anything but numeric (including an empty string or space), the field renders with a default value of "0":
This stinks because the user needs to hit ⌫ before entering a value.
Is there any way to fix this?
Update: I'm an idiot. Some JavaScript was validating and reformatting the field. Nevermind.
I would look at the code you are using to set the value attribute of this field (value="{{ order.amount }}"). The reason I say this is that in Mobile Safari a "vanilla" numeric field is empty, i.e. no 0 by default.
Your screenshot suggests to me that you're using jQuery Mobile, so I checked using that in case the issue lay there, but again, no default value of zero.
For what it's worth, this is the mark-up I'm using (which renders an empty number field in iOS emulators and on an iPhone 3GS):
<input type="number" value="" />