rsuite 6.0.0-canary-2025032014 → 6.0.0-canary-20250403

package/Pagination/styles/index.css

@@ -1604,7 +1604,7 @@ textarea.rs-input {
 .rs-input-group .rs-input-number,
 .rs-input-group .rs-input-group-addon,
 .rs-input-group .rs-input-group-btn,
-.rs-input-group .rs-picker-date .rs-picker-toggle {
+.rs-input-group .rs-picker[data-picker='date'] .rs-picker-toggle {
   border: none;
   border-radius: var(--rs-radius-none);
   outline: none;
@@ -1760,22 +1760,22 @@ textarea.rs-input {
   stroke: var(--rs-close-button-hover-color);
   stroke-width: 1;
 }
-.rs-picker-subtle .picker-subtle-toggle {
+.rs-picker[data-variant='subtle'] .picker-subtle-toggle {
   --rs-picker-toggle-border-width: 0px;
   position: relative;
   z-index: 5;
 }
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle {
+.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle {
   cursor: not-allowed;
 }
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:hover,
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:focus,
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:active {
+.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:hover,
+.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:focus,
+.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:active {
   background: none;
 }
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:hover::after,
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:focus::after,
-.rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:active::after {
+.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:hover::after,
+.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:focus::after,
+.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:active::after {
   display: none;
 }
 .rs-picker {
@@ -1783,25 +1783,23 @@ textarea.rs-input {
   --rs-picker-loader-size: 20px;
   --rs-picker-toggle-border-width: 1px;
   --rs-picker-toggle-bg: var(--rs-input-bg);
-}
-.rs-picker-toggle-wrapper {
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;
 }
-.rs-picker-block {
+.rs-picker[data-block='true'] {
   display: block;
   width: 100%;
 }
-.rs-picker-disabled {
+.rs-picker[data-disabled='true'] {
   cursor: not-allowed;
 }
-.rs-picker-disabled .rs-picker-toggle-value,
-.rs-picker-disabled .rs-picker-toggle-indicator,
-.rs-picker-disabled .rs-picker-tag-list .rs-tag {
+.rs-picker[data-disabled='true'] .rs-picker-toggle-value,
+.rs-picker[data-disabled='true'] .rs-picker-toggle-indicator,
+.rs-picker[data-disabled='true'] .rs-picker-tag-list .rs-tag {
   color: var(--rs-text-disabled) !important;
 }
-.rs-picker-disabled .rs-picker-value-count {
+.rs-picker[data-disabled='true'] .rs-picker-value-count {
   opacity: 0.5;
 }
 .rs-picker-toggle .rs-picker-toggle-placeholder {
@@ -1811,10 +1809,6 @@ textarea.rs-input {
 .rs-picker-has-value .rs-picker-toggle .rs-picker-toggle-value {
   color: var(--rs-picker-value);
 }
-.rs-picker-countable .rs-picker-toggle-value {
-  display: flex;
-  align-items: center;
-}
 .rs-picker-value-list {
   flex: 0 1 auto;
   overflow: hidden;
@@ -1825,11 +1819,12 @@ textarea.rs-input {
   margin-inline: var(--rs-picker-value-count-margin);
   background-color: var(--rs-picker-count-bg);
   color: var(--rs-picker-count-text);
+  flex-shrink: 0;
 }
 .rs-picker-value-separator {
   margin: 0 var(--rs-spacing) 0 0;
 }
-.rs-picker:not(.rs-picker-disabled):hover,
+.rs-picker:not([data-disabled='true']):hover,
 .rs-picker.rs-picker-focused {
   border-color: var(--rs-input-focus-border);
 }
@@ -1865,6 +1860,7 @@ textarea.rs-input {
   --rs-picker-popup-shadow: var(--rs-shadow-md);
   --rs-picker-popup-position-x: var(--rs-position-x);
   --rs-picker-popup-position-y: var(--rs-position-y);
+  --rs-picker-min-width: 0;
   position: absolute;
   top: var(--rs-picker-popup-position-y);
   left: var(--rs-picker-popup-position-x) /* rtl:ignore */;
@@ -1878,6 +1874,7 @@ textarea.rs-input {
   background-color: var(--rs-bg-overlay);
   box-shadow: var(--rs-picker-popup-shadow);
   padding-block: var(--rs-picker-popup-border-radius);
+  min-width: var(--rs-picker-min-width);
 }
 .rs-theme-high-contrast .rs-picker-popup {
   border: 1px solid var(--rs-border-primary);
@@ -1903,37 +1900,74 @@ textarea.rs-input {
   color: var(--rs-text-secondary);
   cursor: default;
 }
-.rs-picker-default .rs-picker-toggle {
+.rs-picker-popup .rs-picker-listbox {
+  max-height: var(--rs-picker-listbox-max-height);
+}
+.rs-picker-popup[data-breakpoint='xs'] {
+  min-width: unset;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.rs-picker-popup[data-breakpoint='xs'] .rs-picker-listbox {
+  height: unset;
+  max-height: unset;
+}
+.rs-picker-popup[data-breakpoint='xs'] .rs-tree,
+.rs-picker-popup[data-breakpoint='xs'] .rs-check-tree {
+  display: flex;
+  flex-direction: column;
+}
+.rs-picker-popup[data-breakpoint='xs'] .rs-tree-view,
+.rs-picker-popup[data-breakpoint='xs'] .rs-check-tree-view {
+  max-height: unset;
+  flex: 1 1 auto;
+}
+.rs-picker-popup[data-breakpoint='xs'] .rs-calendar-table {
+  width: 100%;
+}
+.rs-picker-popup[data-breakpoint='xs'] .rs-picker-box {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.rs-picker-popup[data-breakpoint='xs'].rs-picker-popup-date .rs-calendar,
+.rs-picker-popup[data-breakpoint='xs'] .rs-picker-daterange-panel-only-time .rs-calendar {
+  height: 348px;
+}
+[data-variant='default'] .rs-picker-toggle {
   color: var(--rs-text-primary);
   border: var(--rs-picker-toggle-border-width) solid var(--rs-border-primary);
 }
-.rs-picker-disabled .rs-picker-toggle {
+[data-disabled='true'] .rs-picker-toggle {
   cursor: not-allowed;
 }
-.rs-picker-toggle .rs-picker-default:not(.rs-picker-disabled):hover,
-.rs-picker-toggle .rs-picker-default:not(.rs-picker-disabled):focus {
+.rs-picker-toggle [data-variant='default']:not([data-disabled='true']):hover,
+.rs-picker-toggle [data-variant='default']:not([data-disabled='true']):focus {
   border-color: var(--rs-input-focus-border);
 }
-.rs-picker-subtle .rs-picker-toggle {
+.rs-picker[data-variant='subtle'] .rs-picker-toggle {
   --rs-picker-toggle-border-width: 0px;
   position: relative;
   z-index: 5;
 }
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle {
+.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle {
   cursor: not-allowed;
 }
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:hover,
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:focus,
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:active {
+.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:hover,
+.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:focus,
+.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:active {
   background: none;
 }
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:hover::after,
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:focus::after,
-.rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:active::after {
+.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:hover::after,
+.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:focus::after,
+.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:active::after {
   display: none;
 }
 .rs-picker-toggle-label {
-  color: var(--rs-text-primary);
+  color: var(--rs-text-secondary);
 }
 .rs-picker-toggle .rs-picker-toggle-stack {
   flex: 1 1 auto;
@@ -1972,44 +2006,67 @@ textarea.rs-input {
 .rs-picker-toggle-read-only {
   opacity: 0;
 }
-.rs-picker-default .rs-picker-toggle {
+.rs-picker-toggle .rs-picker[data-variant='default'],
+.rs-picker-toggle {
   transition: border-color ease-in-out 0.15s;
 }
-.rs-theme-high-contrast .rs-picker-default .rs-picker-toggle {
+.rs-theme-high-contrast .rs-picker-toggle .rs-picker[data-variant='default'],
+.rs-theme-high-contrast .rs-picker-toggle {
   transition: none;
 }
-.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle:hover,
-.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle:focus,
-.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle-active {
+.rs-picker-toggle .rs-picker[data-variant='default']:hover,
+:not([data-disabled='true']) .rs-picker-toggle:hover,
+.rs-picker-toggle .rs-picker[data-variant='default']:focus,
+:not([data-disabled='true']) .rs-picker-toggle:focus,
+.rs-picker-toggle .rs-picker[data-variant='default']-active,
+:not([data-disabled='true']) .rs-picker-toggle-active {
   border-color: var(--rs-input-focus-border);
 }
-.rs-picker-subtle .rs-picker-toggle {
+.rs-picker[data-variant='subtle'] .rs-picker-toggle {
   color: var(--rs-btn-subtle-text);
   background-color: transparent;
   transition: none;
 }
-.rs-picker-subtle .rs-picker-toggle:hover {
+.rs-picker[data-variant='subtle'] .rs-picker-toggle:hover {
   color: var(--rs-btn-subtle-hover-text);
   background-color: var(--rs-btn-subtle-hover-bg);
 }
-.rs-picker-subtle .rs-picker-toggle:active,
-.rs-picker-subtle .rs-picker-toggle.rs-btn-active {
+.rs-picker[data-variant='subtle'] .rs-picker-toggle:active,
+.rs-picker[data-variant='subtle'] .rs-picker-toggle.rs-btn-active {
   color: var(--rs-btn-subtle-active-text);
   background-color: var(--rs-btn-subtle-active-bg);
 }
-.rs-picker-subtle .rs-picker-toggle:disabled,
-.rs-picker-subtle .rs-picker-toggle.rs-btn-disabled {
+.rs-picker[data-variant='subtle'] .rs-picker-toggle:disabled,
+.rs-picker[data-variant='subtle'] .rs-picker-toggle.rs-btn-disabled {
   color: var(--rs-btn-subtle-disabled-text);
   background: none;
 }
-.rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle:disabled,
-.rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle.rs-btn-disabled {
+.rs-theme-high-contrast .rs-picker[data-variant='subtle'] .rs-picker-toggle:disabled,
+.rs-theme-high-contrast .rs-picker[data-variant='subtle'] .rs-picker-toggle.rs-btn-disabled {
   border-color: var(--rs-btn-default-disabled-boreder-color);
 }
-.rs-picker-subtle .rs-picker-toggle-active {
+.rs-picker[data-variant='subtle'] .rs-picker-toggle-active {
   background-color: var(--rs-btn-subtle-hover-bg);
   color: var(--rs-btn-subtle-hover-text);
 }
+.rs-picker-toggle[data-size='lg'] .rs-picker-clean .rs-icon {
+  width: 16px;
+  height: 16px;
+}
+.rs-picker-toggle[data-size='sm'] .rs-picker-clean {
+  height: 18px;
+}
+.rs-picker-toggle[data-size='xs'] .rs-picker-clean {
+  height: 18px;
+}
+.rs-picker-toggle[data-size='xs'] .rs-picker-clean .rs-icon {
+  width: 12px;
+  height: 12px;
+}
+.rs-picker-toggle[data-countable='true'] .rs-picker-toggle-value {
+  display: flex;
+  align-items: center;
+}
 .rs-picker-toggle.rs-btn {
   text-align: start;
   display: inline-flex;
@@ -2043,18 +2100,18 @@ textarea.rs-input {
   font-size: var(--rs-font-size-md);
   color: var(--rs-text-secondary);
 }
-.rs-picker-default .rs-btn,
+.rs-picker[data-variant='default'] .rs-btn,
 .rs-picker-input .rs-btn,
-.rs-picker-default .rs-picker-toggle,
+.rs-picker[data-variant='default'] .rs-picker-toggle,
 .rs-picker-input .rs-picker-toggle {
   background-color: var(--rs-picker-toggle-bg);
 }
-.rs-picker-default.rs-picker-disabled,
-.rs-picker-input.rs-picker-disabled {
+.rs-picker[data-variant='default'][data-disabled='true'],
+.rs-picker-input[data-disabled='true'] {
   --rs-picker-toggle-bg: var(--rs-input-disabled-bg);
 }
-.rs-picker-default.rs-picker-disabled .rs-input-group,
-.rs-picker-input.rs-picker-disabled .rs-input-group {
+.rs-picker[data-variant='default'][data-disabled='true'] .rs-input-group,
+.rs-picker-input[data-disabled='true'] .rs-input-group {
   pointer-events: none;
 }
 .rs-check-item {

package/README.md

@@ -7,7 +7,7 @@
 English | [中文版][readm-cn]
 
 [![npm][npm-svg]][npm-home]
-[![GitHub Actions][actions-svg]][actions-home]
+[![GitHub Actions][nodejs-ci-svg]][nodejs-ci]
 [![npm bundle size][npm-bundle-size-img]][npm-bundle-size]
 [![codecov][codecov-img]][codecov]
 [![Discord][discord-svg]][discord-invite]
@@ -146,8 +146,8 @@ React Suite is [MIT licensed][license].
 [npm-home]: https://www.npmjs.com/package/rsuite
 [npm-bundle-size-img]: https://badgen.net/bundlephobia/minzip/rsuite?icon=npm
 [npm-bundle-size]: https://bundlephobia.com/package/rsuite
-[actions-svg]: https://github.com/rsuite/rsuite/workflows/Node.js%20CI/badge.svg?branch=main
-[actions-home]: https://github.com/rsuite/rsuite/actions?query=branch%3Amain+workflow%3A%22Node.js+CI%22
+[nodejs-ci-svg]: https://github.com/rsuite/rsuite/workflows/Node.js%20CI/badge.svg
+[nodejs-ci]: https://github.com/rsuite/rsuite/actions/workflows/nodejs-ci.yml?query=branch%3Amain+workflow%3A%22Node.js+CI%22
 [discord-svg]: https://img.shields.io/badge/Discord-Join%20chat%20%E2%86%92-738bd7.svg
 [discord-invite]: https://discord.gg/R8mnjwh
 [release-notes]: https://github.com/rsuite/rsuite/releases

package/RadioGroup/styles/index.css

@@ -73,6 +73,7 @@
   --rs-radio-group-picker-border-radius: var(--rs-radius-md);
   display: inline-flex;
   align-items: center;
+  flex-wrap: wrap;
   color: var(--rs-text-primary);
   border: 1px solid var(--rs-border-primary);
   border-radius: var(--rs-radio-group-picker-border-radius);

package/RadioGroup/styles/index.less

@@ -25,6 +25,7 @@
 
   display: inline-flex;
   align-items: center;
+  flex-wrap: wrap;
   color: var(--rs-text-primary);
   border: @radio-group-border-width solid var(--rs-border-primary);
   border-radius: var(--rs-radio-group-picker-border-radius);

package/RangeSlider/styles/index.css

@@ -254,16 +254,19 @@
 }
 /* rtl:end:ignore */
 .rs-slider {
+  --rs-slider-size: 6px;
+  --rs-slider-mark-mt: 9px;
+  --rs-slider-handle-size: 12px;
+  --rs-slider-handle-bw: 2px;
+  --rs-slider-calibration-size: 4px;
+  --rs-slider-transition: 0.15s ease-in-out;
+  --rs-tooltip-offset: 0;
   position: relative;
 }
 .rs-slider .rs-tooltip {
+  left: var(--rs-tooltip-offset);
   display: none;
 }
-.rs-slider .rs-tooltip.rs-tooltip-placement-top .rs-tooltip::after {
-  margin: auto;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-}
 .rs-slider-disabled {
   opacity: 0.5;
   cursor: not-allowed;
@@ -273,10 +276,30 @@
   pointer-events: none;
 }
 .rs-slider-with-mark:not(.rs-slider-vertical) {
-  margin-bottom: 29px;
+  margin-bottom: calc(20px + var(--rs-slider-mark-mt));
+}
+.rs-slider:where([data-size='xs']) {
+  --rs-slider-size: 4px;
+  --rs-slider-handle-size: 8px;
+  --rs-slider-calibration-size: 0;
+}
+.rs-slider:where([data-size='md']) {
+  --rs-slider-size: 8px;
+  --rs-slider-handle-size: 16px;
+  --rs-slider-calibration-size: 6px;
+}
+.rs-slider:where([data-size='lg']) {
+  --rs-slider-size: 10px;
+  --rs-slider-handle-size: 20px;
+  --rs-slider-calibration-size: 8px;
+}
+.rs-slider:where([data-size='xl']) {
+  --rs-slider-size: 12px;
+  --rs-slider-handle-size: 24px;
+  --rs-slider-calibration-size: 10px;
 }
 .rs-slider-bar {
-  height: 6px;
+  height: var(--rs-slider-size);
   border-radius: var(--rs-radius-sm);
   background-color: var(--rs-slider-bar);
   transition: background-color ease-in-out 0.3s;
@@ -287,26 +310,27 @@
 }
 .rs-slider-vertical .rs-slider-bar {
   height: 100%;
-  width: 6px;
+  width: var(--rs-slider-size);
 }
 .rs-slider-handle {
   position: absolute;
   top: -50%;
   outline: none;
+  left: var(--rs-slider-offset);
 }
 .rs-slider-handle::before {
   content: '';
   position: absolute;
-  width: 12px;
-  height: 12px;
+  width: var(--rs-slider-handle-size);
+  height: var(--rs-slider-handle-size);
   border-radius: var(--rs-radius-full);
-  border: 2px solid var(--rs-slider-thumb-border);
+  border-width: var(--rs-slider-handle-bw);
+  border-style: solid;
+  border-color: var(--rs-slider-thumb-border);
   background-color: var(--rs-slider-thumb-bg);
-  margin-inline-start: -6px;
+  margin-inline-start: calc(var(--rs-slider-handle-size) / -2);
   cursor: pointer;
-  /* stylelint-disable */
-  transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
-  /* stylelint-enable */
+  transition: box-shadow var(--rs-slider-transition), background-color var(--rs-slider-transition), transform var(--rs-slider-transition);
 }
 .rs-slider-handle:hover::before,
 .rs-slider-handle:focus::before {
@@ -317,11 +341,13 @@
   transform: scale(1.2);
 }
 .rs-slider-vertical .rs-slider-handle {
+  left: unset;
   top: unset;
+  bottom: var(--rs-slider-offset);
 }
 .rs-slider-vertical .rs-slider-handle::before {
-  inset-inline-start: 3px;
-  margin-top: -6px;
+  inset-inline-start: calc((var(--rs-slider-handle-size) - var(--rs-slider-size)) / 2);
+  margin-top: calc(var(--rs-slider-handle-size) / -2);
 }
 .rs-slider-handle:hover .rs-tooltip,
 .rs-slider-handle.active .rs-tooltip {
@@ -331,28 +357,38 @@
 }
 .rs-slider-vertical .rs-slider-handle:hover .rs-tooltip,
 .rs-slider-vertical .rs-slider-handle.active .rs-tooltip {
-  top: -33px;
-  margin-inline-start: 3px;
+  top: -12px;
+  margin-inline-start: -36px;
 }
 .rs-slider-mark {
   position: absolute;
-  top: 15px;
-  inset-inline-start: -2px;
+  top: calc(var(--rs-slider-size) + var(--rs-slider-mark-mt));
   white-space: nowrap;
 }
 .rs-slider-mark-content {
-  margin-inline-start: -50%;
+  margin-inline-start: calc(-50% + 2px);
 }
 .rs-slider-mark-last {
   inset-inline-start: auto;
-  inset-inline-end: -2px;
+  inset-inline-end: 0;
 }
 .rs-slider-mark-last .rs-slider-mark-content {
-  margin-inline-start: 50%;
+  margin-inline-start: calc(50% - 2px);
 }
 .rs-slider-graduator {
+  --rs-slider-tick-offset: 0;
   width: 100%;
 }
+.rs-slider-graduator .rs-slider-tick[data-active='true']::before {
+  visibility: hidden;
+}
+.rs-slider-graduator[data-with-marks='true'] .rs-slider-tick {
+  position: absolute;
+  left: var(--rs-slider-tick-offset);
+}
+.rs-slider-graduator[data-with-marks='true'] .rs-slider-tick:last-child::after {
+  display: none;
+}
 .rs-slider-graduator ol,
 .rs-slider-graduator li {
   list-style: none;
@@ -371,41 +407,38 @@
   content: '';
   display: block;
   position: absolute;
-  width: 8px;
-  height: 8px;
+  width: var(--rs-slider-calibration-size);
+  height: var(--rs-slider-calibration-size);
   border-radius: var(--rs-radius-full);
   background-color: var(--rs-slider-thumb-bg);
   box-sizing: border-box;
-  border: 2px solid var(--rs-slider-bar);
-  margin-inline-start: -4px;
-  top: -1px;
+  margin-inline: 2px;
+  top: 1px;
 }
 .rs-slider-vertical .rs-slider-graduator > ol > li:last-child::after,
 .rs-slider-vertical .rs-slider-graduator > ol > li::before {
   top: unset;
-  bottom: -4px;
-  margin-inline-start: -1px;
+  bottom: 2px;
+  margin-inline-start: 1px;
 }
 .rs-slider-graduator > ol > li:last-child::after {
-  inset-inline-end: -4px;
+  inset-inline-end: 0;
 }
 .rs-slider-vertical .rs-slider-graduator > ol > li:last-child::after {
   inset-inline-start: 0;
   bottom: unset;
-  top: -4px;
-}
-.rs-slider-graduator > ol > li.rs-slider-pass::before {
-  border-color: var(--rs-slider-progress);
-}
-.rs-slider-graduator > ol > li.rs-slider-active::before {
-  visibility: hidden;
+  top: 2px;
 }
 .rs-slider-vertical .rs-slider-graduator {
   display: block;
   height: 100%;
 }
+.rs-slider-vertical .rs-slider-graduator[data-with-marks='true'] .rs-slider-tick {
+  left: unset;
+  bottom: var(--rs-slider-tick-offset);
+}
 .rs-slider-vertical .rs-slider-graduator > ol {
-  width: 6px;
+  width: var(--rs-slider-size);
   display: flex;
   flex-direction: column-reverse;
   height: 100%;
@@ -417,13 +450,13 @@
 }
 .rs-slider-progress-bar {
   position: absolute;
-  height: 6px;
+  height: var(--rs-slider-size);
   border-top-left-radius: var(--rs-radius-sm);
   border-bottom-left-radius: var(--rs-radius-sm);
   background-color: var(--rs-slider-progress);
 }
 .rs-slider-vertical .rs-slider-progress-bar {
-  width: 6px;
+  width: var(--rs-slider-size);
   border-bottom-left-radius: var(--rs-radius-sm);
   border-bottom-right-radius: var(--rs-radius-sm);
 }
@@ -433,7 +466,7 @@
 .rs-slider-vertical .rs-slider-mark {
   top: unset;
   bottom: -8px;
-  inset-inline-start: 15px;
+  inset-inline-start: calc(var(--rs-slider-size) + var(--rs-slider-mark-mt));
 }
 .rs-slider-vertical .rs-slider-mark-content {
   margin-inline-start: auto;