Add a negative number range input

Ionic Framework ionic-v3
1

Hi there,

I’m still using the range component inherited from ionic 1.
However, I’d like to have a negative range input from right to left and for negative number instead of the default range from left to right.

I’ve tried to set

<ion-content padding class="diagnosticNegative">
	<div class="range-list">
		<p secondary>Objectif</p>
		<p secondary>{{data.objectifValue}} KG</p>
		<div class="item range range-negative">
			<input type="range" name="objectifValue" min="-1" max="-150" value="-1" (change)="setData($event.target.value)">
		</div>
	</div>
    <button secondary round outline (click)="nextDiagnosticSlide()" class="next-diagnostic-button">Valider et revenir à l'écran précédent</button>
</ion-content>

Unfortunately, the generated slider is still from left to right and start with value -1 but when i’m sliding it, it’s sliding to positive value and not negatives one as defined in range slider HTML definition.

Is there a solution for doing it please ?

Thanks by advance,

2

I’m not sure if I understand correctly, but if you want to show the larger value on the left (where should be the smaller value) then AFAIK it’s not supported by default.

The reason for this is that you’ve set the min attribute to a value that is larger than the value of the max attribute (-1 > -150) which makes the max value invalid and a default value is used (100).

Assuming that you want to display the larger value on the left, I would recommend you to make a workaround by using the range component properly (i.e. specifying correct values for the ranges) and fixing the value in the backend code - in your case this means to set min to 1 and max to 150 and in setData() method to multiply the value by -1.

3

Hi,

Thanks for your answer,
I guess I misspoke.
For my first point, at the moment, when you try to implement an range input it appears like that :
|======== : where “|” is your cursor and “==” is the slidable area.
With negative values, I would oike somthing like that : =====| where “|” is my “-1” value and when you’re sliding left, you’re going to more negative values.
The best example of my explanation would be this jQuery plugin, I’d like to have something like that : http://rangeslider.js.org/ (check at the first example at middle page - negatives values)

For the other points, that was my bad, and thank you for help me with min/max in negatives :slight_smile:

4

I’m not sure if you managed to solve the problem, but in such case simply switching the min/max values should fix it, i.e. update your code this way:

<input type="range" name="objectifValue" min="-150" max="-1" value="-1" (change)="setData($event.target.value)">
5

It works very well !
Thanks for your help and advices ! :smile: