Moved Settings Preference View into its dedicated file and started to implement ElementRange

front/components/GtkUI/ElementList.tsx

@@ -1,30 +1,25 @@
 import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
-import IconButton from "../IconButton";
-import { Ionicons } from "@expo/vector-icons";
-import { RawElement } from "./RawElement";
 import { Element } from "./Element";
 
+import {
+	ElementTextProps,
+	ElementToggleProps,
+	ElementDropdownProps,
+	ElementRangeProps,
+	ElementType,
+} from "./ElementTypes";
+
 import {
 	Box,
-	Center,
-	Button,
 	Column,
-	Row,
-	Icon,
-	Text,
 	Divider,
-	Switch,
-	Popover,
-	Pressable,
-	useBreakpointValue,
-	Select,
 } from "native-base";
 
 export type ElementProps = {
 	title: string;
 	icon?: React.ReactNode;
-	type?: ElementType | "custom";
+	type?: ElementType;
 	helperText?: string;
 	description?: string;
 	disabled?: boolean;
@@ -32,6 +27,7 @@ export type ElementProps = {
 		| ElementTextProps
 		| ElementToggleProps
 		| ElementDropdownProps
+		| ElementRangeProps
 		| React.ReactNode;
 };
 

front/components/GtkUI/ElementTypes.tsx

@@ -1,6 +1,6 @@
-import { Select, Switch, Text, Icon, Row } from "native-base";
+import { Select, Switch, Text, Icon, Row, Slider } from "native-base";
 import { MaterialIcons } from "@expo/vector-icons";
-export type ElementType = "custom" | "default" | "text" | "toggle" | "dropdown";
+export type ElementType = "custom" | "default" | "text" | "toggle" | "dropdown" | "range";
 
 export type DropdownOption = {
 	label: string;
@@ -25,6 +25,15 @@ export type ElementDropdownProps = {
 	defaultValue?: string;
 };
 
+export type ElementRangeProps = {
+    onValueChange: (value: number) => void;
+    value: number;
+    defaultValue?: number;
+    min: number;
+    max: number;
+    step?: number;
+}
+
 export const getElementTextNode = (
 	{ text, onPress }: ElementTextProps,
 	disabled: boolean
@@ -92,3 +101,27 @@ export const getElementDropdownNode = (
 		</Select>
 	);
 };
+
+export const getElementRangeNode = (
+    { onValueChange, value, defaultValue, min, max, step }: ElementRangeProps,
+    disabled: boolean,
+    title: string,
+) => {
+    return (
+        <Slider
+            value={value}
+            defaultValue={defaultValue}
+            minValue={min}
+            maxValue={max}
+            step={step}
+            isDisabled={disabled}
+            onChangeEnd={onValueChange}
+            accessibilityLabel={`Slider for ${title}`}
+        >
+            <Slider.Track>
+                <Slider.FilledTrack />
+            </Slider.Track>
+            <Slider.Thumb />
+        </Slider>
+    )
+}

front/components/GtkUI/RawElement.tsx

@@ -16,9 +16,11 @@ import {
 	getElementDropdownNode,
 	getElementTextNode,
 	getElementToggleNode,
+	getElementRangeNode,
 	ElementDropdownProps,
 	ElementTextProps,
 	ElementToggleProps,
+	ElementRangeProps
 } from "./ElementTypes";
 
 type RawElementProps = {
@@ -118,6 +120,12 @@ export const RawElement = ({ element, isHovered }: RawElementProps) => {
 									data as ElementDropdownProps,
 									disabled ?? false
 								);
+							case "range":
+								return getElementRangeNode(
+									data as ElementRangeProps,
+									disabled ?? false,
+									title
+								);
 							case "custom":
 								return data as React.ReactNode;
 							default: