Add sliders

client/src/styles/partials/generic/forms/index.scss

@@ -3,3 +3,4 @@
 @import './files.scss';
 @import './dropdowns.scss';
 @import './radios.scss';
+@import './sliders.scss';

client/src/styles/partials/generic/forms/main.scss

@@ -3,6 +3,7 @@
 .bd-form-dropdown,
 .bd-form-radio,
 .bd-form-numberinput,
+.bd-form-slider,
 .bd-setting-switch {
     .bd-title {
         display: flex;

client/src/styles/partials/generic/forms/sliders.scss

@@ -0,0 +1,48 @@
+.bd-slider {
+    height: 24px;
+
+    .bd-slider-container {
+        margin-top: 8px;
+        border-radius: 8px;
+    }
+
+    .bd-slider-bar {
+        background-color: #4f545c;
+        height: 8px;
+        border-radius: 4px;
+
+        .bd-slider-bar-filled {
+            background-color: $colbdblue;
+            height: 8px;
+            border-radius: 4px 0 0 4px;
+            width: 100%;
+        }
+    }
+
+    input {
+        border-radius: 4px;
+        display: block;
+        height: 8px;
+        background-color: transparent;
+        outline: none;
+        width: 180px;
+        margin: -8px 0 0;
+        -webkit-appearance: none;
+        appearance: none;
+
+        &::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            -webkit-box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
+            background-color: #fff;
+            border: 1px solid #dcddde;
+            border-radius: 3px;
+            box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
+            cursor: ew-resize;
+            height: 24px;
+            left: 0;
+            top: 50%;
+            width: 10px;
+        }
+    }
+}

client/src/ui/components/bd/pluginsetting/PluginSetting.vue

@@ -15,6 +15,7 @@
         <NumberSetting v-if="setting.type === 'number'" :setting="setting" :change="change"/>
         <RadioSetting v-if="setting.type === 'radio'" :setting="setting" :change="change"/>
         <StringSetting v-if="setting.type === 'text'" :setting="setting" :change="change"/>
+        <SliderSetting v-if="setting.type === 'slider'" :setting="setting" :change="change"/>
         <FileSetting v-if="setting.type === 'file'" :setting="setting" :change="change"/>
         <div class="bd-form-divider"></div>
     </div>
@@ -26,6 +27,7 @@
     import NumberSetting from './Number.vue';
     import RadioSetting from './Radio.vue';
     import StringSetting from './String.vue';
+    import SliderSetting from './Slider.vue';
     import FileSetting from './File.vue';
 
     export default {
@@ -40,6 +42,7 @@
             NumberSetting,
             RadioSetting,
             StringSetting,
+            SliderSetting,
             FileSetting
         }
     }

client/src/ui/components/bd/pluginsetting/Slider.vue

@@ -0,0 +1,44 @@
+/**
+ * BetterDiscord Plugin Setting Slider Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <div class="bd-form-slider">
+        <div class="bd-title">
+            <h3>{{ setting.text }}</h3>
+            <div class="bd-slider">
+                <div class="bd-slider-container">
+                    <div class="bd-slider-bar">
+                        <div class="bd-slider-bar-filled" :style="'width: ' + (((this.setting.value - (this.setting.min || 0)) / ((this.setting.max || 100) - (this.setting.min || 0))) * 100) + '%;'"></div>
+                    </div>
+                    <input type="range" :value="setting.value" :min="setting.min || 0" :max="setting.max || 100" :step="setting.step || 1" @keyup.stop @input="input" />
+                </div>
+            </div>
+        </div>
+        <div class="bd-hint">{{ setting.hint }}</div>
+    </div>
+</template>
+<script>
+    export default {
+        props: ['setting', 'change'],
+        data() {
+            return {
+                fillpercentage: 0
+            };
+        },
+        methods: {
+            input(e) {
+                let number = parseFloat(e.target.value);
+                if (Number.isNaN(number)) return;
+
+                this.change(this.setting.id, number);
+            }
+        }
+    }
+</script>

tests/plugins/Example/config.json

@@ -61,6 +61,16 @@
                     "text": "Number Test Setting",
                     "hint": "Number Test Setting Hint"
                 },
+                {
+                    "id": "test-slider-1",
+                    "type": "slider",
+                    "value": 0,
+                    "min": 0,
+                    "max": 100,
+                    "step": 1,
+                    "text": "Slider Test Setting",
+                    "hint": "Slider Test Setting Hint"
+                },
                 {
                     "id": "default-3",
                     "type": "file",