Add the range slider design to the NumberInput widget (#839)

* Add range slider to NumberInput

* Cleanup

* Fix event ordering causing bug in Firefox

* Polish the code

* Switch number input modes to range in relevant places

frontend/src/components/widgets/inputs/FieldInput.vue

@@ -2,11 +2,11 @@
 <template>
 	<LayoutRow class="field-input" :class="{ disabled, 'sharp-right-corners': sharpRightCorners }" :title="tooltip">
 		<input
+			type="text"
 			v-if="!textarea"
 			:class="{ 'has-label': label }"
 			:id="`field-input-${id}`"
 			ref="input"
-			type="text"
 			v-model="inputValue"
 			:spellcheck="spellcheck"
 			:disabled="disabled"
@@ -15,6 +15,7 @@
 			@change="() => $emit('textChanged')"
 			@keydown.enter="() => $emit('textChanged')"
 			@keydown.esc="() => $emit('cancelTextChange')"
+			data-input-element
 		/>
 		<textarea
 			v-else
@@ -49,10 +50,11 @@
 	flex-direction: row-reverse;
 
 	label {
-		flex: 1 1 100%;
+		flex: 0 0 auto;
 		line-height: 18px;
-		margin-left: 8px;
 		padding: 3px 0;
+		padding-right: 4px;
+		margin-left: 8px;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;