We Keep Coding

Mat Slider Value in Angular 15

The code used to work in Angular 14 but is not working in Angular 15.
<mat-slider
min="1"
max="150"
step="10"
value="55"
#itemHeight
>
</mat-slider>
<label> {{ itemHeight.value }} hie </label>
StackBlitz link => https://stackblitz.com/edit/angular-ixbgdr?file=src%2Fmain.ts

You now have to pass an input to the slider :
<mat-slider min="1" max="5" step="0.5" value="1.5">
<input matSliderThumb #itemHeight>
</mat-slider>
<label> {{itemHeight.value}} </label>

Any changes are clearly outlined in the MDC migration guide - MDC Migration Guide
You would have found your answer also from the docs for the slider component - Material Docs

Save specific combinations out of a list on PHP?

This is kind of such a specific question that I don't know where to start despite googling so I came here for advice.
Let's say on my page I have three sliders, one has three different color options for a square. The second has three different color options for a circle, and the third has three different color options for say, a triangle. And then a submit button.
How would I go about making it possible for the user to select a color of each and then submit, so it will save the specific combination to the backend? Any advice on how this would be done?

You have to name all your inputs and they values will be sended ehwn you submit the form.
Example:
<form action="" method="post">
<input type="range" min="1" max="100" value="50" name="square">
<input type="range" min="1" max="100" value="50" name="circle">
<input type="range" min="1" max="100" value="50" name="triangle">
<input type="submit" value="">
</form>

You can set a form in HTML with all the inputs format and then send the information of each input to your specific URL
<form action="../doStuff.php" method="post">
<input type="range" min="1" max="3" value="1" name="square">
<input type="range" min="1" max="3" value="1" name="circle">
<input type="range" min="1" max="3" value="1" name="triangle">
<input type="submit" value="Send Information">
</form>
Each input lets you choose a number from 1 to 3. The rest you can define it with javascript

Firefox is showing error when I enter a floating number in number type textbox

Below is my textbox:
<input type="number" id="payement-textbox" name="payment-textbox" min="1" max="100000" maxlength="9" class="payment" placeholder="--" value=""/>
This works fine in Google Chrome. But when I try to enter a floating number in mozilla firefox, it creates a red border around the box. Is there any way to stop firefox to validate float number?

Just specify step attribute.
<input type="number" id="payement-textbox" name="payment-textbox" min="1" max="100000" maxlength="9" class="payment" placeholder="--" step="0.01" value=""/>
Hope this helps.

Chrome is a lot more tolerant to avoid programming errors like this. as Huxdit said, you have to include a step attribute
<input type="number" step="0.01" />

How to dynamically update range slider

I've created the following code to show the user their range slider value. However, it only shows the value when the user stops moving the slider. Is there a way to show the value WHILE the user drags the range slider? I'm looking for a way to do this in vanilla JS.
function updateInput(val) {
document.getElementById('textInput').innerHTML=val;
}
<input type="range" name="rangeInput" min="0" max="100" onchange="updateInput(this.value);">
<p id="textInput"></p>

Here you go:
<input type="range" name="rangeInput" min="0" max="100" onchange="updateInput(this.value);" oninput="updateInput(this.value)" >
<p id="textInput"></p>
oninput is not supported in IE10, so you have to use both, oninput and onchange.
Here is the demo

Use oninput instead of onchange.
Magical proof!

onmousemove function make this happen:
<input type="range" name="rangeInput" min="0" max="100" onmousemove="document.getElementById('textInput').innerHTML=this.value;">
<p id="textInput"></p>

Dynamically change input id with value - input type=range

I'm making a phone gap query mobile iOS app for course evaluation at my uni. This app primary function will be a form that in it's original form uses radio buttons where each value also has a corresponding id - e.g.
<input name="q10" id="1" value="1" type="radio" />
<input name="q10" id="2" value="2" type="radio" />
<input name="q10" id="3" value="3" type="radio" />
<input name="q10" id="4" value="4" type="radio" />
<input name="q10" id="5" value="5" type="radio" />
<input name="q10" id="6" value="6" type="radio" />
But radio buttions aren't that intuitive on iOS devices so I'm using input type range instead.
This works great for changing the value between 1 and 6 but the problem is that one only specifies one id for the whole input, not one id per value.
<input type="range" name="q10" id="q10" value="0" min="0" max="6" />
Is there a way to change the id with the value? I think this should be doable through JavaScript but I lack the know-how. I also cannot change the way the database is set up (requiring both id and value) as this database belongs to the university's IT-department.

You can use the change event
<input type="range" onchange="this.id=this.value" name="q10" id="q10" value="0" min="0" max="6" />
Working example here - http://jsfiddle.net/aVHm8/
Note: I always feel uneasy about changing the ID of a DOM element .. perhaps you should investigate better options to resolve your issue

The database can't know what the id is unless you use JavaScript to send it to the server (standard form submission sends the name and the value). In which case find the bit of JS that pulls out the ID and just send the value twice instead.