poe-svelte-ui-lib 1.2.25 → 1.2.27

package/dist/Map/MapProps.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import { t } from '../locales/i18n'
+  import { type UIComponent, type IGraphProps, updateProperty } from '../types'
+  import * as UI from '..'
+  import Modal from '../Modal.svelte'
+  import { ICONS } from '../icons'
+  import Button from '../Button/Button.svelte'
+  import CrossIcon from '../libIcons/CrossIcon.svelte'
+
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
+    component: UIComponent & { properties: Partial<IGraphProps> }
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
+    forConstructor?: boolean
+  }>()
+
+  let showIconLib = $state(false)
+
+  const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
+  let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
+</script>
+
+{#if forConstructor}
+  <div class="relative flex flex-row items-start justify-center">
+    <!-- Сообщение для отправки в ws по нажатию кнопки -->
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.variable') }}
+        options={VARIABLE_OPTIONS}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
+        onUpdate={(value) => {
+          updateProperty('id', value.value as string, component, onPropertyChange)
+          updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
+          onPropertyChange(null, value.name?.split('—')[1].trim(), null)
+        }}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label.class') }}
+        value={component.properties.label.class}
+        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <div class="mt-6 flex gap-2">
+        <UI.Button content={{ name: $t('constructor.props.markerIcon') }} onClick={() => (showIconLib = true)} />
+        {#if showIconLib}
+          <Modal bind:isOpen={showIconLib} wrapperClass="w-130">
+            {#snippet main()}
+              <div class="grid grid-cols-3">
+                {#each ICONS as category}
+                  <div class="relative m-1.5 rounded-xl border-2 border-(--border-color) p-3">
+                    <div class="absolute -top-3.5 bg-(--back-color) px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
+                    <div class="grid grid-cols-3 place-items-center gap-2">
+                      {#each category[1] as icon}
+                        <button
+                          class="h-8 w-8 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
+                          onclick={() => {
+                            updateProperty('markerIcon', icon as string, component, onPropertyChange)
+                          }}
+                        >
+                          {@html icon}
+                        </button>{/each}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/snippet}
+          </Modal>
+        {/if}
+        {#if component.properties.markerIcon}
+          <Button
+            wrapperClass="w-8.5 "
+            componentClass="p-0.5 bg-red"
+            content={{ icon: CrossIcon }}
+            onClick={() => {
+              updateProperty('markerIcon', '', component, onPropertyChange)
+            }}
+          />
+        {/if}
+      </div>
+    </div>
+  </div>
+{:else}
+  <div class="relative mb-2 flex flex-row items-start justify-center">
+    <!-- Сообщение для отправки в ws по нажатию кнопки -->
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.id') }}
+        value={component.properties.id}
+        onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label.class') }}
+        value={component.properties.label.class}
+        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
+      />
+    </div>
+
+    <div class="flex w-1/3 flex-col px-2">
+      <div class="mt-6 flex gap-2">
+        <UI.Button content={{ name: $t('constructor.props.markerIcon') }} onClick={() => (showIconLib = true)} />
+        {#if showIconLib}
+          <Modal bind:isOpen={showIconLib} wrapperClass="w-130">
+            {#snippet main()}
+              <div class="grid grid-cols-3">
+                {#each ICONS as category}
+                  <div class="relative m-1.5 rounded-xl border-2 border-(--border-color) p-3">
+                    <div class="absolute -top-3.5 bg-(--back-color) px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
+                    <div class="grid grid-cols-3 place-items-center gap-2">
+                      {#each category[1] as icon}
+                        <button
+                          class="h-8 w-8 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
+                          onclick={() => {
+                            updateProperty('markerIcon', icon as string, component, onPropertyChange)
+                          }}
+                        >
+                          {@html icon}
+                        </button>{/each}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/snippet}
+          </Modal>
+        {/if}
+        {#if component.properties.markerIcon}
+          <Button
+            wrapperClass="w-8.5 "
+            componentClass="p-0.5 bg-red"
+            content={{ icon: CrossIcon }}
+            onClick={() => {
+              updateProperty('markerIcon', '', component, onPropertyChange)
+            }}
+          />
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/Map/MapProps.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type UIComponent, type IGraphProps } from '../types';
+type $$ComponentProps = {
+    component: UIComponent & {
+        properties: Partial<IGraphProps>;
+    };
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void;
+    forConstructor?: boolean;
+};
+declare const MapProps: import("svelte").Component<$$ComponentProps, {}, "">;
+type MapProps = ReturnType<typeof MapProps>;
+export default MapProps;

package/dist/Select/SelectProps.svelte

@@ -105,6 +105,13 @@
       />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
       <UI.Select
         label={{ name: $t('constructor.props.type') }}
         type="buttons"
@@ -131,30 +138,20 @@
         }}
       />
       {#if component.properties.bitMode}
-        <div class="flex w-full gap-4">
-          <UI.Input
-            label={{ name: $t('constructor.props.range.start') }}
-            value={component.properties.range.start}
-            onUpdate={(value) => {
-              updateProperty('range.start', value as number, component, onPropertyChange)
-              generateBitOptions(component.properties.range.start, component.properties.range.end)
-            }}
-            number={{ minNum: 0, maxNum: 31, step: 1 }}
-            help={{ info: $t('constructor.props.range.start.help') }}
-            type="number"
-          />
-          <UI.Input
-            label={{ name: $t('constructor.props.range.end') }}
-            value={component.properties.range.end}
-            onUpdate={(value) => {
-              updateProperty('range.end', value as number, component, onPropertyChange)
+        <UI.Slider
+          label={{ name: $t('constructor.props.range') }}
+          type="range"
+          number={{ minNum: 0, maxNum: 31, step: 1 }}
+          value={[component.properties.range.start, component.properties.range.end]}
+          onUpdate={(value) => {
+            if (Array.isArray(value)) {
+              if (value[1] - value[0] > 6) value = [value[0], value[0] + 6]
+              updateProperty('range.start', value[0] as number, component, onPropertyChange)
+              updateProperty('range.end', value[1] as number, component, onPropertyChange)
               generateBitOptions(component.properties.range.start, component.properties.range.end)
-            }}
-            number={{ minNum: 0, maxNum: 31, step: 1 }}
-            help={{ info: $t('constructor.props.range.end.help') }}
-            type="number"
-          />
-        </div>
+            }
+          }}
+        />
       {/if}
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
@@ -271,6 +268,13 @@
         value={component.properties.id}
         onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
       <UI.Input
         label={{ name: $t('constructor.props.wrapperclass') }}
         value={component.properties.wrapperClass}

package/dist/Slider/Slider.svelte

@@ -1,10 +1,8 @@
 <!-- $lib/ElementsUI/Slider.svelte -->
 <script lang="ts">
   import type { ISliderProps } from '../types'
-  import IconGripVerticalLeft from '../libIcons/IconGripVerticalLeft.svelte'
-  import IconGripVerticalRight from '../libIcons/IconGripVerticalRight.svelte'
-  import IconGripVerticalDual from '../libIcons/IconGripVerticalDual.svelte'
   import { twMerge } from 'tailwind-merge'
+  import { onDestroy, onMount } from 'svelte'
 
   let {
     id = crypto.randomUUID(),
@@ -27,10 +25,9 @@
   let lowerValue = $derived(isRange && Array.isArray(value) ? value[0] : number.minNum)
   let upperValue = $derived(isRange && Array.isArray(value) ? value[1] : number.maxNum)
 
-  /* Расчет позиций */
-  const singlePosition = $derived(((singleValue - number.minNum) / (number.maxNum - number.minNum)) * 100)
-  const lowerPosition = $derived(((lowerValue - number.minNum) / (number.maxNum - number.minNum)) * 100)
-  const upperPosition = $derived(((upperValue - number.minNum) / (number.maxNum - number.minNum)) * 100)
+  let activeRound: 'floor' | 'ceil' = $state('floor')
+
+  let centerNum = $derived(lowerValue + Math[activeRound]((upperValue - lowerValue) / 2 / number.step) * number.step)
 
   $effect(() => {
     if (value === undefined || value === null) {
@@ -43,13 +40,15 @@
     const stepValue = direction === 'increment' ? number.step : -number.step
     if (isRange && target !== 'single') {
       if (target === 'lower') {
-        lowerValue = Math.max(number.minNum, Math.min(lowerValue + stepValue, upperValue))
+        lowerValue = roundToClean(Math.max(number.minNum, Math.min(lowerValue + stepValue, upperValue)))
+        lowerValue = roundToClean(lowerValue == upperValue ? upperValue - number.step : lowerValue)
       } else {
-        upperValue = Math.min(number.maxNum, Math.max(upperValue + stepValue, lowerValue))
+        upperValue = roundToClean(Math.min(number.maxNum, Math.max(upperValue + stepValue, lowerValue)))
+        upperValue = roundToClean(upperValue == lowerValue ? upperValue + number.step : upperValue)
       }
       onUpdate([lowerValue, upperValue])
     } else {
-      singleValue = Math.max(number.minNum, Math.min(singleValue + stepValue, number.maxNum))
+      singleValue = roundToClean(Math.max(number.minNum, Math.min(singleValue + stepValue, number.maxNum)))
       onUpdate(singleValue)
     }
   }
@@ -63,36 +62,20 @@
     }
   })
 
-  let activeThumb = $state<'lower' | 'upper'>('lower')
-  const handleTrackClick = (e: MouseEvent) => {
-    e.stopPropagation()
-    const track = e.currentTarget as HTMLElement
-    const rect = track.getBoundingClientRect()
-    const clickPercent = ((e.clientX - rect.left) / rect.width) * 100
-    const rawValue = number.minNum + (clickPercent / 100) * (number.maxNum - number.minNum)
-    const clickValue = Math.round((rawValue - number.minNum) / number.step) * number.step + number.minNum
+  const roundToClean = (num: number): number => {
+    if (Number.isInteger(num)) return num
 
-    if (isRange) {
-      const lowerDiff = Math.abs(clickValue - lowerValue)
-      const upperDiff = Math.abs(clickValue - upperValue)
+    const rounded1 = Number(num.toFixed(1))
+    if (Math.abs(rounded1 - num) < 1e-10) return rounded1
 
-      activeThumb = lowerDiff < upperDiff ? 'lower' : 'upper'
+    const rounded2 = Number(num.toFixed(2))
+    if (Math.abs(rounded2 - num) < 1e-10) return rounded2
 
-      if (activeThumb === 'lower') {
-        lowerValue = Math.max(number.minNum, Math.min(clickValue, upperValue))
-      } else {
-        upperValue = Math.min(number.maxNum, Math.max(clickValue, lowerValue))
-      }
-
-      onUpdate([lowerValue, upperValue])
-    } else {
-      singleValue = Math.max(number.minNum, Math.min(clickValue, number.maxNum))
-      onUpdate(singleValue)
-    }
+    return rounded2
   }
 </script>
 
-<div class={twMerge(`relative flex w-full flex-col items-center `, wrapperClass)}>
+<div class={twMerge(`bg-blue relative flex w-full flex-col items-center `, wrapperClass)}>
   {#if label.name}
     <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
@@ -100,109 +83,149 @@
   <!-- Слайдер -->
   <div
     id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
-    class="relative flex h-7 w-full justify-center rounded-full {disabled ? 'cursor-not-allowed opacity-50' : ''}"
+    class="relative flex h-8 w-full items-center justify-center rounded-full {disabled ? 'cursor-not-allowed opacity-50' : ''}"
   >
     {#if isRange}
-      <!-- Трек и активная зона -->
-      <div
-        class={`absolute h-full w-full rounded-full bg-(--gray-color) ${disabled ? '' : 'cursor-pointer'}`}
-        role="button"
-        tabindex={null}
-        onkeydown={null}
-        onclick={disabled ? undefined : handleTrackClick}
-      >
-        <div class="absolute h-full rounded-full bg-(--bg-color)" style={`left: ${lowerPosition}%; right: ${100 - upperPosition}%;`}></div>
-      </div>
-
-      <!-- Ползунки -->
-      <input
-        type="range"
-        min={number.minNum}
-        max={number.maxNum}
-        step={number.step}
-        bind:value={lowerValue}
-        oninput={disabled
-          ? undefined
-          : (e) => {
-              const newValue = Math.min(Number((e.target as HTMLInputElement).value), upperValue)
-              lowerValue = newValue
-              activeThumb = 'lower'
-            }}
-        onmouseup={disabled ? undefined : () => onUpdate([lowerValue, upperValue])}
-        {disabled}
-        class={`absolute h-full w-full appearance-none bg-transparent ${activeThumb === 'lower' ? 'z-30' : 'z-20'}`}
-      />
-      <div
-        class="pointer-events-none absolute z-40 rounded-full bg-(--field-color)"
-        style={`left: calc(${lowerPosition}% + 0rem); top: 50%; transform: translateY(-50%)`}
-      >
-        <IconGripVerticalLeft />
-      </div>
-
-      <input
-        type="range"
-        min={number.minNum}
-        max={number.maxNum}
-        step={number.step}
-        bind:value={upperValue}
-        oninput={disabled
-          ? undefined
-          : (e) => {
-              const newValue = Math.max(Number((e.target as HTMLInputElement).value), lowerValue)
-              upperValue = newValue
-              activeThumb = 'upper'
-            }}
-        onmouseup={disabled ? undefined : () => onUpdate([lowerValue, upperValue])}
-        {disabled}
-        class={`absolute h-full w-full appearance-none bg-transparent ${activeThumb === 'upper' ? 'z-30' : 'z-20'}`}
-      />
-      <div
-        class="pointer-events-none absolute z-40 rounded-full bg-(--field-color)"
-        style={`left: calc(${upperPosition}% - 2rem); top: 50%; transform: translateY(-50%)`}
-      >
-        <IconGripVerticalRight />
+      {@const userAgent = navigator.userAgent}
+      <div class="flex w-full">
+        <input
+          type="range"
+          min={number.minNum}
+          max={centerNum}
+          step={number.step}
+          bind:value={lowerValue}
+          oninput={disabled
+            ? undefined
+            : (e) => {
+                const newValue = Math.min(Number((e.target as HTMLInputElement).value), upperValue)
+                lowerValue = roundToClean(newValue == upperValue ? upperValue - number.step : newValue)
+              }}
+          onmousedown={() => (activeRound = 'ceil')}
+          {disabled}
+          class={twMerge(
+            `slider-bg basis-[calc(${(centerNum / number.maxNum) * 100}%+2rem+5px)] h-8 w-full appearance-none overflow-hidden 
+              accent-(--back-color) 
+              [&::-webkit-slider-runnable-track]:rounded-l-full
+              [&::-webkit-slider-runnable-track]:bg-(--gray-color)
+              [&::-webkit-slider-runnable-track]:px-2
+              [&::-webkit-slider-thumb]:relative
+              [&::-webkit-slider-thumb]:z-100
+              [&::-webkit-slider-thumb]:size-4
+              [&::-webkit-slider-thumb]:cursor-pointer
+              [&::-webkit-slider-thumb]:rounded-full
+            [&::-webkit-slider-thumb]:shadow-red-500
+            ${
+              userAgent.includes('iOS') || userAgent.includes('iPhone') || userAgent.includes('iPad')
+                ? '[&::-webkit-slider-thumb]:ring-[6.5px]'
+                : '[&::-webkit-slider-thumb]:ring-[5px] '
+            }
+            [&::-moz-range-thumb]:relative 
+            [&::-moz-range-thumb]:ml-[-0.4rem]
+            [&::-moz-range-thumb]:size-4 
+            [&::-moz-range-thumb]:cursor-pointer 
+            [&::-moz-range-thumb]:rounded-full
+            [&::-moz-range-thumb]:shadow-[var(--focus-shadow),] 
+            [&::-moz-range-thumb]:ring-[6px] 
+            [&::-moz-range-track]:rounded-full
+            [&::-moz-range-track]:bg-(--gray-color)
+             `,
+            `[&::-moz-range-thumb]:shadow-[calc(100rem+0.5rem)_0_0_100rem] 
+              [&::-webkit-slider-thumb]:shadow-[calc(100rem+0.5rem)_0_0_100rem]`,
+          )}
+        />
+        <input
+          type="range"
+          min={centerNum}
+          max={number.maxNum}
+          step={number.step}
+          bind:value={upperValue}
+          oninput={disabled
+            ? undefined
+            : (e) => {
+                const newValue = Math.max(Number((e.target as HTMLInputElement).value), lowerValue)
+                upperValue = roundToClean(newValue == lowerValue ? newValue + number.step : upperValue)
+              }}
+          onmousedown={() => (activeRound = 'floor')}
+          {disabled}
+          class={twMerge(
+            `slider-bg basis-[calc(${100 - (centerNum / number.maxNum) * 100}%+2rem+5px)] h-8 w-full  appearance-none overflow-hidden  
+              accent-(--back-color) 
+              [&::-webkit-slider-runnable-track]:rounded-r-full
+              [&::-webkit-slider-runnable-track]:bg-(--gray-color)
+              [&::-webkit-slider-runnable-track]:px-2
+              [&::-webkit-slider-thumb]:relative
+              [&::-webkit-slider-thumb]:z-100
+              [&::-webkit-slider-thumb]:size-4
+              [&::-webkit-slider-thumb]:cursor-pointer
+              [&::-webkit-slider-thumb]:rounded-full
+            [&::-webkit-slider-thumb]:shadow-red-500
+            ${
+              userAgent.includes('iOS') || userAgent.includes('iPhone') || userAgent.includes('iPad')
+                ? '[&::-webkit-slider-thumb]:ring-[6.5px]'
+                : '[&::-webkit-slider-thumb]:ring-[5px] '
+            }
+            [&::-moz-range-thumb]:relative 
+            [&::-moz-range-thumb]:ml-[-0.4rem]
+            [&::-moz-range-thumb]:size-4 
+            [&::-moz-range-thumb]:cursor-pointer 
+            [&::-moz-range-thumb]:rounded-full
+            [&::-moz-range-thumb]:shadow-[var(--focus-shadow),] 
+            [&::-moz-range-thumb]:ring-[6px] 
+            [&::-moz-range-track]:rounded-full
+            [&::-moz-range-track]:bg-(--gray-color)
+             `,
+            `[&::-moz-range-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem] 
+              [&::-webkit-slider-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem]`,
+          )}
+        />
       </div>
     {:else}
+      {@const userAgent = navigator.userAgent}
       <!-- Одиночный слайдер -->
-      <div
-        class={`absolute h-full w-full rounded-full bg-(--gray-color) ${disabled ? '' : 'cursor-pointer'}`}
-        role="button"
-        tabindex={null}
-        onkeydown={null}
-        onclick={disabled ? undefined : handleTrackClick}
-      >
-        <div
-          class="absolute z-10 h-full {singlePosition === 100 ? ' rounded-full' : 'rounded-l-full'}"
-          style={`width: ${singlePosition}%; background-color: var(--bg-color)`}
-        ></div>
-      </div>
+      <div class="absolute h-full w-full">
+        <input
+          type="range"
+          class={twMerge(
+            `slider-bg  h-8 w-full appearance-none overflow-hidden rounded-full accent-(--back-color) 
+              [&::-webkit-slider-runnable-track]:rounded-full
+              [&::-webkit-slider-runnable-track]:bg-(--gray-color)
+              [&::-webkit-slider-thumb]:relative 
 
-      <input
-        type="range"
-        min={number.minNum}
-        max={number.maxNum}
-        step={number.step}
-        bind:value={singleValue}
-        oninput={disabled
-          ? undefined
-          : (e) => {
-              singleValue = Number((e.target as HTMLInputElement).value)
-            }}
-        onmouseup={disabled ? undefined : () => onUpdate(singleValue)}
-        {disabled}
-        class="absolute z-20 h-full w-full appearance-none"
-      />
-      <div
-        class="pointer-events-none absolute z-30 rounded-full bg-(--field-color)"
-        style={`left: clamp(1rem, ${singlePosition}%, calc(100% - 1rem)); top: 50%; transform: translate(-50%, -50%)`}
-      >
-        <IconGripVerticalDual />
+              [&::-webkit-slider-thumb]:ml-[-0.4rem] 
+              [&::-webkit-slider-thumb]:h-4
+              [&::-webkit-slider-thumb]:w-4
+              [&::-webkit-slider-thumb]:cursor-pointer
+              [&::-webkit-slider-thumb]:rounded-full
+            [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
+            ${
+              userAgent.includes('iOS') || userAgent.includes('iPhone') || userAgent.includes('iPad')
+                ? 'pl-3.5 [&::-webkit-slider-thumb]:ring-[6.5px]'
+                : 'pl-3 [&::-webkit-slider-thumb]:ring-[5px]'
+            }
+            [&::-moz-range-thumb]:relative 
+            [&::-moz-range-thumb]:ml-[-0.4rem]
+            [&::-moz-range-thumb]:size-4 
+            [&::-moz-range-thumb]:cursor-pointer 
+            [&::-moz-range-thumb]:rounded-full
+            [&::-moz-range-thumb]:shadow-[var(--focus-shadow),] 
+            [&::-moz-range-thumb]:ring-[6px] 
+            [&::-moz-range-track]:rounded-full
+            [&::-moz-range-track]:bg-(--gray-color)
+             `,
+            `[&::-moz-range-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem] 
+              [&::-webkit-slider-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem]`,
+          )}
+          min={number.minNum}
+          max={number.maxNum}
+          step={number.step}
+          bind:value={singleValue}
+        />
       </div>
     {/if}
   </div>
 
   <!-- Кнопки управления -->
-  <div class={`mt-2 flex w-full ${isRange ? 'justify-between' : 'justify-center'} gap-2`}>
+  <div class={`mt-3 flex w-full ${isRange ? 'justify-between' : 'justify-center'} gap-2`}>
     {#if isRange}
       {#each ['lower', 'upper'] as type (type)}
         <div
@@ -246,64 +269,3 @@
     {/if}
   </div>
 </div>
-
-<style>
-  input[type='range'] {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
-    padding: 0;
-    pointer-events: none;
-    outline: none;
-  }
-
-  /* Webkit thumb */
-  input[type='range']::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    background: transparent;
-    cursor: pointer;
-    pointer-events: auto;
-    border: none;
-  }
-
-  /* Firefox thumb */
-  input[type='range']::-moz-range-thumb {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    background: transparent;
-    cursor: pointer;
-    pointer-events: auto;
-    border: none;
-  }
-
-  /* Webkit track */
-  input[type='range']::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 100%;
-    background: transparent;
-    border-radius: 0;
-    border: none;
-  }
-
-  /* Firefox track */
-  input[type='range']::-moz-range-track {
-    width: 100%;
-    height: 100%;
-    background: transparent;
-    border-radius: 0;
-    border: none;
-  }
-
-  input[type='range']:disabled::-webkit-slider-thumb {
-    cursor: not-allowed;
-  }
-
-  input[type='range']:disabled::-moz-range-thumb {
-    cursor: not-allowed;
-  }
-</style>