Set all gridsizes in state

frontend/libs/studio-components/src/components/StudioSlider/StudioSlider.module.css

@@ -1,66 +1,90 @@
 .sliderContainer {
-  width: 100%;
-  display: flex;
-  gap: 1rem;
+  position: relative;
+  --height: 3rem;
+  --outline: 0.1rem solid var(--primary-color-700);
+  --outline-offset: 0.2rem;
+  --background: lightgrey;
+  --border-radius: 0.2rem;
+  --thumb-width: calc(100% / 12);
+  --thumb-background-colour: var(--primary-color-700);
+  --thumb-box-shadow: -100vw 0 0 100vw var(--thumb-background-colour);
 }
 
-.range {
-  display: flex;
+.disabled {
+  --thumb-background-colour: var(--fds-semantic-border-neutral-default);
+}
+
+input[type='range'] {
+  -webkit-appearance: none;
+  appearance: none;
   width: 100%;
-  flex-direction: column;
-  align-items: center;
+  cursor: pointer;
 }
 
-.disabledSliderValue,
-.currentSliderValue {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  font-size: 2rem;
-  min-width: 3rem;
+input[type='range'].disabled {
+  cursor: not-allowed;
 }
 
-.disabledSliderValue {
-  color: var(--fds-semantic-text-neutral-subtle);
+input[type='range']::-webkit-slider-runnable-track {
+  height: var(--height);
+  background: var(--background);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  outline: var(--outline);
+  outline-offset: var(--outline-offset);
 }
 
-.currentSliderValue {
-  color: var(--fds-semantic-text-action-default);
+input[type='range']::-moz-range-track {
+  height: var(--height);
+  background: var(--background);
+  border-radius: var(--border-radius);
 }
 
-datalist {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  margin-top: 0.5rem;
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  height: var(--height);
+  width: var(--thumb-width);
+  box-shadow: var(--thumb-box-shadow);
+  background-color: var(--thumb-background-colour);
+  border-radius: var(--border-radius);
 }
 
-datalist option {
-  min-width: 1rem;
+input[type='range']::-moz-range-thumb {
+  height: var(--height);
+  width: var(--thumb-width);
+  box-shadow: var(--thumb-box-shadow);
+  background-color: var(--thumb-background-colour);
+  border-radius: var(--border-radius);
+}
+
+datalist {
+  position: absolute;
+  top: 0;
   display: flex;
-  justify-content: center;
+  width: calc(100% + var(--outline-offset));
+  justify-content: space-around;
+  --datalist-height: calc(var(--height) + var(--outline-offset));
+  height: var(--datalist-height);
   align-items: center;
-  text-align: center;
+  color: white;
+  pointer-events: none;
 }
 
-input[type='range'] {
-  /*  ...  */
-  /*  slider progress trick  */
-  overflow: hidden;
-  border-radius: 3rem;
+option {
+  display: flex;
   width: 100%;
+  text-align: center;
+  justify-content: center;
+  height: var(--datalist-height);
+  align-items: center;
+  border-left: 1px solid white;
 }
 
-input[type='range']::-webkit-slider-runnable-track {
-  cursor: pointer;
-  border-radius: 1rem;
-  border: 0.1rem solid var(--primary-color-700);
-  background-color: white;
+option:first-child {
+  border-left: 1px solid transparent;
 }
 
-/* Thumb: webkit */
-input[type='range']::-webkit-slider-thumb {
-  border-radius: 50%;
-  border: 0.8rem solid;
-  box-shadow: -25.6rem 0 0 25rem var(--primary-color-700);
+.outsideGrid {
+  color: var(--primary-color-700);
 }

frontend/libs/studio-components/src/components/StudioSlider/StudioSlider.tsx

@@ -1,10 +1,11 @@
-import React, { ChangeEvent } from 'react';
+import React, { ChangeEvent, useEffect, useState } from 'react';
 import classes from './StudioSlider.module.css';
+import cn from 'classnames';
 
 type StudioSliderProps = {
   disabled?: boolean;
-  sliderValue?: string;
-  handleSliderChange: (newValue: string) => void;
+  sliderValue?: number;
+  handleSliderChange: (newValue: number) => void;
 };
 
 /**
@@ -13,34 +14,41 @@ type StudioSliderProps = {
  */
 export const StudioSlider = ({
   disabled = false,
-  sliderValue = '12',
+  sliderValue = 12,
   handleSliderChange,
 }: StudioSliderProps) => {
-  const gridValues = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
+  const [value, setValue] = useState<number>(sliderValue);
+  const gridValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+  useEffect(() => {
+    setValue(sliderValue ?? 12);
+  }, [sliderValue]);
+
   return (
-    <div className={classes.sliderContainer}>
-      <div className={classes.range}>
-        <input
-          type='range'
-          min='1'
-          max='12'
-          id='range'
-          value={sliderValue}
-          list='gridValues'
-          onChange={(event: ChangeEvent<HTMLInputElement>) =>
-            handleSliderChange(event.target.value)
-          }
-          disabled={disabled}
-        />
-        <datalist id='gridValues'>
-          {gridValues.map((gridValue) => (
-            <option key={gridValue} value={gridValue} label={gridValue}></option>
-          ))}
-        </datalist>
-      </div>
-      <div className={disabled ? classes.disabledSliderValue : classes.currentSliderValue}>
-        {sliderValue}
-      </div>
+    <div className={cn(classes.sliderContainer, disabled && classes.disabled)}>
+      <input
+        className={disabled && classes.disabled}
+        type='range'
+        min='1'
+        max='12'
+        id='range'
+        value={sliderValue}
+        list='gridValues'
+        onChange={(event: ChangeEvent<HTMLInputElement>) =>
+          handleSliderChange(parseInt(event.target.value))
+        }
+        onInput={(event: ChangeEvent<HTMLInputElement>) => setValue(parseInt(event.target.value))}
+        disabled={disabled}
+      />
+      <datalist id='gridValues'>
+        {gridValues.map((gridValue) => (
+          <option
+            key={gridValue}
+            value={gridValue}
+            label={gridValue.toString()}
+            className={gridValue > value && classes.outsideGrid}
+          ></option>
+        ))}
+      </datalist>
     </div>
   );
 };

frontend/packages/ux-editor/src/components/config/editModal/EditGrid.module.css

@@ -2,9 +2,9 @@
   background-color: white;
   border-radius: 0.5rem;
   padding-right: 0.5rem;
+  gap: 0 !important;
 }
 
 .viewSizesTabs {
-  margin-left: 1rem;
-  margin-top: 0.5rem;
+  margin-left: 0.5rem;
 }