How can I update or show the actual value of a range input in Vue 3?
I thought it would be possible wiht v-model like this:
<input id="rangeSlider" type="range" class="form-range" v-model="value" min="0" max="5" step="0.2"/>
<label for="rangeSlider" class="sliderValue">
Value: {{ value }} m
</label>
It actually works exactly the same as the Vue2, just a little bit different Vue setup
const app = Vue.createApp({
data: () => ({
value: 0
})
})
const vm = app.mount('#app')
<script src="https://unpkg.com/vue#3.2.26/dist/vue.global.js"></script>
<div id="app">
<input id="rangeSlider" type="range" class="form-range" v-model="value" min="0" max="5" step="0.2"/>
<label for="rangeSlider" class="sliderValue">
Value: {{ value }} m
</label>
</div>
Related
I'm trying to set up react-fook-form to validate my forms, but when I use the register function on a text input (in my case the username input), this input is no longer editable, I can't type anything inside.
const {register, handleSubmit, formState: { errors }} = useForm();
const [username, setUsername] = useState('');
.....
<form onSubmit={handleSubmit(onSubmit)}>
<label htmlFor="username">Username : </label>
<input type="text" value={username}
onChange={e => setUsername(e.target.value)}
{...register('username', { required: 'Please, type in your username' })}
/>
{errors.username && <span style={{color: 'red'}}><br/>{errors.username.message}</span>}
<br/>
<label htmlFor="password">Password : </label>
<input type="password" value={password} onChange={e => setPassword(e.target.value)}/>
<br/>
<button type="submit">Login</button>
</form>
Ok I finally found the solution myself.
Since the version 7 of react-hook-form library, we have to place "onChange" inside the register function like so :
<input type="text" value={username} {...register('username', {
required: 'Please, type in your username',
onChange: e => setUsername(e.target.value)
})}/>
Honestly thought this was an easy issue to solve, but I'm stuck trying to figure this out. I want to set my input-group spinner to show the value 1 when the user opens the application.
<input id="option1" type="number" min="1" value ="1"
class="form-control"
ng-model="targetEntity.option1">
</div>
I thought value="1" would solve the issue but it hasn't shown the desired result, I was wondering what am I doing wrong?
Initialize the value of targetEntity.option1 in your controller:
angular.module('app', [])
.controller('ctrl', ($scope) => {
$scope.targetEntity = {
option1: 1
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input id="option1" type="number" min="1"
class="form-control"
ng-model="targetEntity.option1" />
</div>
I have two fields which both take numbers. One must always be higher than the other. For example you can have a field for age, and then a field for older sibling age which of course must be greater depending on the first field.
My fields are like this:
<input type="number" ng-model="age" required>
<input type="number" ng-model="olderSiblingAge" required>
I've tried using min="age" in the olderSibling input, but no luck, can still go below it.
You have to interpolate the value like this: min="{{vm.age}}" as specified in the number input documentation regarding to AngularJS.
angular
.module('app', [])
.controller('ctrl', function() {
var vm = this;
vm.age = 1;
vm.olderSiblingAge = 2;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as vm">
<label> Age </label> <br />
<input type="number" ng-model="vm.age" required ng-change="vm.olderSiblingAge = vm.age">
<br /><br />
<label> Older sibling age </label> <br />
<input type="number" ng-model="vm.olderSiblingAge" required min="{{vm.age}}">
</div>
Note: I've used the controller-as syntax. Of course you can use it as your were doing it with the $scope notation like this min="{{age}}"
TRY USING THIS CODE
<input type="number" ng-model="age" required>
<input type="number" ng-change="olderSiblingAge = (olderSiblingAge < age)?age+1:olderSiblingAge" ng-model="olderSiblingAge" required>
To achieve expected result, use below option of using ng-blur to compare entered values
code sample https://codepen.io/nagasai/pen/XEJpYa?editors=1010
HTML:
<div ng-app="test" ng-controller="testCtrl">
Age <input type="number" ng-model="age" required>
Sibling Age <input type="number" ng-model="olderSiblingAge" required ng-blur="check()">{{olderSiblingAge}}
</div>
JS:
var app = angular.module('test',[]);
app.controller('testCtrl',function($scope){
$scope.check = function(){
if($scope.age > $scope.olderSiblingAge){
$scope.olderSiblingAge = null
alert("older sibling age should be greater than age")
}
}
})
I am facing a problem in Angular JS. Here is the code I wrote :
<script>
function diveInput($scope) {
$scope.dive_points = [ {depth: 0, date: 0}, {depth: 43, date: 1} ]
}
</script>
<div ng-app ng-controller="diveInput">
<ul>
<li ng-repeat="dive_point in dive_points">
<label>date :</label> <input type="number" min="0" ng-model="dive_point.date" />
<label>depth :</label> <input type="number" max="0" ng-model="dive_point.depth"/>
</li>
</ul>
<pre>{{dive_points}}</pre>
</div>
The expected behaviour is to see the two initials depth points in the inputs (0/0 and 1/43).
Then, if I change the value of an input, I except to see this modifications in the "" tag.
I did JSFiddle for this code if you want to play with it.
Why only the date of the second dive_point is displayed and not the depth ?
Why when I change one of the depth value, nothing works, the depth field disapear of the "pre" tag ?
You've got set max to 0 max="0" in your
<input type="number" max="0" ng-model="dive_point.depth" />
and in your controller you set depth to 43 so it was out of allowed range.
Please see working demo below
'use strict';
function diveInput($scope) {
$scope.dive_points = [{
depth: 0,
date: 0
}, {
depth: 43,
date: 1
}]
$scope.addDivePoint = function() {
$scope.dive_points.push({
depth: 0,
date: 0
});
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="diveInput">
<ul>
<li ng-repeat="dive_point in dive_points">
<div>
<label>date :</label>
<input type="number" min="0" ng-model="dive_point.date" />
</div>
<div>
<label>depth :</label>
<input type="number" max="50" ng-model="dive_point.depth" />
</div>
</li>
</ul>
<pre>{{dive_points}}</pre>
</div>
I'm using this code:
<input type="range" min="1" max="100" name="points">
How do I display the current value in the slider?
If you want to display the concrete number you could have a span or something over top the input and use jquery to handle the onchanged event.
HTML:
Price: <input id="price" type="text" value="10.50" readonly /><br/>
Quantity: <input id="qty" type="text" value="1" readonly />
<input id="rangePoints" type="range" min="1" max="100" value="1"/><br/><br/>
Total Price: <input type="text" id="total" readonly />
JS:
$(function() {
$("#rangePoints").change(function() {
var qty = $("#rangePoints").val();
var price = $("#price").val();
$("#qty").val(qty);
$("#total").val(qty*price);
});
});
Working JsFiddle
The range input type is supported only by newer browsers. But with a bit of JavaScript magic you can make it accessible for older browers too, you don't even need jQuery in order to do this.
In JavaScript, add the following snippet:
function updateCurrentValue(val) {
document.getElementById('currentValue').value=val;
}
And then, in the HTML add another input element where to show the current value of the slider:
<input type="range" min="1" max="100" name="points" onchange="updateCurrentValue(this.value);">
Current value: <input type="text" id="currentValue">