Remove unused slider component (#12303)

It is unused as of https://github.com/matrix-org/matrix-react-sdk/pull/12246. I noticed this while working on https://github.com/matrix-org/matrix-react-sdk/pull/12299.

res/css/_components.pcss

@@ -209,7 +209,6 @@
 @import "./views/elements/_SearchWarning.pcss";
 @import "./views/elements/_ServerPicker.pcss";
 @import "./views/elements/_SettingsFlag.pcss";
-@import "./views/elements/_Slider.pcss";
 @import "./views/elements/_Spinner.pcss";
 @import "./views/elements/_StyledCheckbox.pcss";
 @import "./views/elements/_StyledRadioButton.pcss";

res/css/views/elements/_Slider.pcss

@@ -1,126 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_Slider {
-    position: relative;
-    margin: 0;
-    flex-grow: 1;
-
-    input[type="range"] {
-        height: 2.4em;
-        appearance: none;
-        width: 100%;
-        background: none;
-        font-size: 1em; /* set base multiplier for em units applied later */
-
-        --active-color: var(--cpd-color-bg-action-primary-rest);
-        --selection-dot-size: 2.4em;
-
-        &:disabled {
-            cursor: not-allowed;
-
-            --active-color: $slider-background-color;
-        }
-
-        &:focus:not(:focus-visible) {
-            outline: none;
-        }
-
-        &::-webkit-slider-runnable-track {
-            width: 100%;
-            height: 0.4em;
-            background: $slider-background-color;
-            border-radius: 5px;
-            border: 0 solid #000000;
-        }
-        &::-webkit-slider-thumb {
-            border: 0 solid #000000;
-            width: var(--selection-dot-size);
-            height: var(--selection-dot-size);
-            background: var(--active-color);
-            border-radius: 50%;
-            -webkit-appearance: none;
-            margin-top: calc(2px + 1.2em - var(--selection-dot-size));
-        }
-        &:focus::-webkit-slider-runnable-track {
-            background: $slider-background-color;
-        }
-
-        &::-moz-range-track {
-            width: 100%;
-            height: 0.4em;
-            background: $slider-background-color;
-            border-radius: 5px;
-            border: 0 solid #000000;
-        }
-        &::-moz-range-progress {
-            height: 0.4em;
-            background: var(--active-color);
-            border-radius: 5px;
-            border: 0 solid #000000;
-        }
-        &::-moz-range-thumb {
-            border: 0 solid #000000;
-            width: var(--selection-dot-size);
-            height: var(--selection-dot-size);
-            background: var(--active-color);
-            border-radius: 50%;
-        }
-
-        &::-ms-track {
-            width: 100%;
-            height: 0.4em;
-            background: transparent;
-            border-color: transparent;
-            color: transparent;
-        }
-        &::-ms-fill-lower,
-        &::-ms-fill-upper {
-            background: $slider-background-color;
-            border: 0 solid #000000;
-            border-radius: 10px;
-        }
-        &::-ms-thumb {
-            margin-top: 1px;
-            width: var(--selection-dot-size);
-            height: var(--selection-dot-size);
-            background: var(--active-color);
-            border-radius: 50%;
-        }
-        &:focus::-ms-fill-upper {
-            background: $slider-background-color;
-        }
-        &::-ms-fill-lower,
-        &:focus::-ms-fill-lower {
-            background: var(--active-color);
-        }
-    }
-
-    output {
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-
-        font-size: 1em; /* set base multiplier for em units applied later */
-        text-align: center;
-        top: 3em;
-
-        .mx_Slider_selection_label {
-            color: $muted-fg-color;
-            font: var(--cpd-font-body-md-regular);
-        }
-    }
-}

res/themes/dark/css/_dark.pcss

@@ -251,8 +251,6 @@ $progressbar-bg-color: var(--cpd-color-gray-200);
 $kbd-border-color: $strong-input-border-color;
 $visual-bell-bg-color: #800;
 $event-timestamp-color: $text-secondary-color;
-$slider-background-color: $quinary-content;
-$appearance-tab-border-color: $room-highlight-color;
 $composer-shadow-color: rgba(0, 0, 0, 0.28);
 $breadcrumb-placeholder-bg-color: #272c35;
 $theme-button-bg-color: #e3e8f0;

res/themes/legacy-dark/css/_legacy-dark.pcss

@@ -208,9 +208,6 @@ $breadcrumb-placeholder-bg-color: #272c35;
 $voice-record-stop-border-color: #6f7882;
 $voice-record-icon-color: #6f7882;
 
-/* Appearance tab colors */
-$appearance-tab-border-color: $room-highlight-color;
-
 $composer-shadow-color: tranparent;
 
 $codeblock-background-color: #2a3039;

res/themes/legacy-light/css/_legacy-light.pcss

@@ -269,9 +269,6 @@ $visual-bell-bg-color: #faa;
 $togglesw-off-color: #c1c9d6;
 $togglesw-ball-color: var(--cpd-color-bg-action-primary-rest);
 
-/* Slider */
-$slider-background-color: #c1c9d6;
-
 $progressbar-bg-color: rgba(141, 151, 165, 0.2);
 
 $authpage-bg-color: #2e3649;
@@ -305,9 +302,6 @@ $voice-record-live-circle-color: #ff4b55;
 $voice-record-stop-border-color: #e3e8f0;
 $voice-record-icon-color: $tertiary-fg-color;
 
-/* FontSlider colors */
-$appearance-tab-border-color: $input-darker-bg-color;
-
 $composer-shadow-color: tranparent;
 
 $codeblock-background-color: $header-panel-bg-color;

res/themes/light-high-contrast/css/_light-high-contrast.pcss

@@ -31,7 +31,6 @@ $button-secondary-bg-color: $accent-fg-color;
 $message-action-bar-fg-color: $primary-content;
 $voice-record-stop-border-color: $quinary-content;
 $voice-record-icon-color: $tertiary-content;
-$appearance-tab-border-color: $input-darker-bg-color;
 $eventbubble-reply-color: $quaternary-content;
 $roomtopic-color: $secondary-content;
 
@@ -104,10 +103,6 @@ $accent-1400: var(--cpd-color-green-1400);
     background-color: $panel-actions !important;
 }
 
-.mx_FontScalingPanel_fontSlider {
-    background-color: $panel-actions !important;
-}
-
 .mx_ThemeChoicePanel_themeSelectors > .mx_StyledRadioButton input[type="radio"]:disabled + div {
     border-color: $primary-content;
 }

res/themes/light/css/_light.pcss

@@ -316,8 +316,6 @@ $progressbar-bg-color: var(--cpd-color-gray-200);
 $kbd-border-color: $strong-input-border-color;
 $visual-bell-bg-color: #faa;
 $event-timestamp-color: #acacac;
-$slider-background-color: $togglesw-off-color;
-$appearance-tab-border-color: $input-darker-bg-color;
 $composer-shadow-color: rgba(0, 0, 0, 0.04);
 $breadcrumb-placeholder-bg-color: #e8eef5;
 $theme-button-bg-color: $quinary-content;

src/components/views/elements/Slider.tsx

@@ -1,88 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import * as React from "react";
-import { ChangeEvent } from "react";
-
-interface IProps {
-    // A callback for the selected value
-    onChange: (value: number) => void;
-
-    // The current value of the slider
-    value: number;
-
-    // The min and max of the slider
-    min: number;
-    max: number;
-    // The step size of the slider, can be a number or "any"
-    step: number | "any";
-
-    // A function for formatting the values
-    displayFunc: (value: number) => string;
-
-    // Whether the slider is disabled
-    disabled: boolean;
-
-    label: string;
-}
-
-const THUMB_SIZE = 2.4; // em
-
-export default class Slider extends React.Component<IProps> {
-    private get position(): number {
-        const { min, max, value } = this.props;
-        return Number(((value - min) * 100) / (max - min));
-    }
-
-    private onChange = (ev: ChangeEvent<HTMLInputElement>): void => {
-        this.props.onChange(parseInt(ev.target.value, 10));
-    };
-
-    public render(): React.ReactNode {
-        let selection: JSX.Element | undefined;
-
-        if (!this.props.disabled) {
-            const position = this.position;
-            selection = (
-                <output
-                    className="mx_Slider_selection"
-                    style={{
-                        left: `calc(2px + ${position}% + ${THUMB_SIZE / 2}em - ${(position / 100) * THUMB_SIZE}em)`,
-                    }}
-                >
-                    <span className="mx_Slider_selection_label">{this.props.value}</span>
-                </output>
-            );
-        }
-
-        return (
-            <div className="mx_Slider">
-                <input
-                    type="range"
-                    min={this.props.min}
-                    max={this.props.max}
-                    value={this.props.value}
-                    onChange={this.onChange}
-                    disabled={this.props.disabled}
-                    step={this.props.step}
-                    autoComplete="off"
-                    aria-label={this.props.label}
-                />
-                {selection}
-            </div>
-        );
-    }
-}