+
{{ value }}
@@ -49,6 +49,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
+ alwaysShowValue: {
+ type: Boolean,
+ default: false,
+ },
value: {
type: Number,
default: 0,
@@ -85,8 +89,8 @@ export default defineComponent({
@@ -106,59 +110,86 @@ body {
input {
width: 100%;
- height: 2px;
+ height: 4px;
-webkit-appearance: none;
appearance: none;
+ cursor: pointer;
+ padding: 8px 0;
+ background-color: var(--background-page);
&::-webkit-slider-runnable-track {
- height: 2px;
+ height: 4px;
background: var(--v-slider-color);
border: none;
- border-radius: 2px;
+ border-radius: 4px;
box-shadow: none;
}
&::-moz-range-track {
- height: 2px;
+ height: 4px;
background: var(--v-slider-color);
border: none;
- border-radius: 2px;
+ border-radius: 4px;
box-shadow: none;
}
&::-webkit-slider-thumb {
+ transition: all var(--fast) var(--transition);
position: relative;
z-index: 3;
- width: 14px;
- height: 14px;
- margin-top: -6px;
- background: var(--v-slider-thumb-color);
+ width: 8px;
+ height: 8px;
+ margin-top: -2px;
+ background: var(--background-page);
border: none;
border-radius: 50%;
box-shadow: none;
- box-shadow: 0 0 0 4px var(--background-page);
+ box-shadow: 0 0 0 4px var(--v-slider-thumb-color);
cursor: ew-resize;
-webkit-appearance: none;
appearance: none;
}
&::-moz-range-thumb {
+ transition: all var(--fast) var(--transition);
position: relative;
z-index: 3;
- width: 14px;
- height: 14px;
- margin-top: -6px;
+ width: 8px;
+ height: 8px;
+ margin-top: -2px;
background: var(--v-slider-thumb-color);
border: none;
border-radius: 50%;
box-shadow: none;
- box-shadow: 0 0 0 4px var(--background-page);
+ box-shadow: 0 0 0 4px var(--v-slider-thumb-color);
cursor: ew-resize;
-webkit-appearance: none;
appearance: none;
}
}
+ &:hover {
+ input {
+ height: 4px;
+ &::-webkit-slider-thumb {
+ width: 12px;
+ height: 12px;
+ margin-top: -4px;
+ box-shadow: 0 0 0 4px var(--v-slider-thumb-color);
+ }
+
+ &::-moz-range-thumb {
+ width: 12px;
+ height: 12px;
+ margin-top: -4px;
+ box-shadow: 0 0 0 4px var(--v-slider-thumb-color);
+ }
+ }
+ .thumb-label {
+ opacity: 1;
+ }
+ }
+
.fill {
position: absolute;
top: 50%;
@@ -166,16 +197,17 @@ body {
left: 0;
z-index: 2;
width: 100%;
- height: 2px;
+ height: 4px;
+ border-radius: 4px;
background-color: var(--v-slider-fill-color);
- transform: translateY(3px) scaleX(calc(var(--_v-slider-percentage) / 100));
+ transform: translateY(-5px) scaleX(calc(var(--_v-slider-percentage) / 100));
transform-origin: left;
pointer-events: none;
}
.ticks {
position: absolute;
- top: 13px;
+ top: 14px;
left: 0;
display: flex;
align-items: center;
@@ -186,12 +218,13 @@ body {
opacity: 0;
transition: opacity var(--fast) var(--transition);
pointer-events: none;
+ z-index: 2;
.tick {
display: inline-block;
width: 4px;
height: 4px;
- background-color: var(--v-slider-fill-color);
+ background-color: var(--v-slider-color);
border-radius: 50%;
}
}
@@ -202,14 +235,15 @@ body {
left: 7px;
width: calc(100% - 14px);
overflow: visible;
+ pointer-events: none;
}
.thumb-label {
position: absolute;
- top: 10px;
+ top: 0px;
left: calc(var(--_v-slider-percentage) * 1%);
width: max-content;
- padding: 4px 8px;
+ padding: 2px 6px;
color: var(--foreground-inverted);
font-weight: 600;
background-color: var(--primary);
@@ -217,17 +251,8 @@ body {
transform: translateX(-50%);
opacity: 0;
transition: opacity var(--fast) var(--transition);
-
- &::before {
- position: absolute;
- top: -4px;
- left: calc(50%);
- width: 10px;
- height: 10px;
- background-color: var(--primary);
- border-radius: 2px;
- transform: translateX(-50%) rotate(45deg);
- content: '';
+ &.visible {
+ opacity: 1;
}
}
diff --git a/app/src/interfaces/slider/index.ts b/app/src/interfaces/slider/index.ts
index 3de9a0457b..90808357c2 100644
--- a/app/src/interfaces/slider/index.ts
+++ b/app/src/interfaces/slider/index.ts
@@ -36,5 +36,14 @@ export default defineInterface(({ i18n }) => ({
interface: 'numeric',
},
},
+ {
+ field: 'alwaysShowValue',
+ name: i18n.t('interfaces.slider.always_show_value'),
+ type: 'boolean',
+ meta: {
+ width: 'half',
+ interface: 'toggle',
+ },
+ },
],
}));
diff --git a/app/src/interfaces/slider/slider.vue b/app/src/interfaces/slider/slider.vue
index 9a17765fc3..d3bfe3c2e1 100644
--- a/app/src/interfaces/slider/slider.vue
+++ b/app/src/interfaces/slider/slider.vue
@@ -5,6 +5,7 @@
:min="minValue"
:max="maxValue"
:step="stepInterval"
+ :alwaysShowValue="alwaysShowValue"
show-thumb-label
show-ticks
@input="$listeners.input"
@@ -36,6 +37,10 @@ export default defineComponent({
type: Number,
default: 1,
},
+ alwaysShowValue: {
+ type: Boolean,
+ default: false,
+ },
},
});
diff --git a/app/src/lang/en-US/interfaces.json b/app/src/lang/en-US/interfaces.json
index c65bdba6eb..c1a76d4424 100644
--- a/app/src/lang/en-US/interfaces.json
+++ b/app/src/lang/en-US/interfaces.json
@@ -151,7 +151,8 @@
},
"slider": {
"slider": "Slider",
- "description": "Select a number using a slider"
+ "description": "Select a number using a slider",
+ "always_show_value": "Always show value"
},
"slug": {
"slug": "Slug",