feat(slider): adds markFontSize theme variable, closes #3820

CHANGELOG.en-US.md

@@ -36,6 +36,7 @@
 - `n-transfer` adds `render-target-list` prop.
 - `n-select` adds `show-checkmark` prop, closes [#3749](https://github.com/tusen-ai/naive-ui/issues/3749).
 - `n-tree` adds `animated` prop, closes [#3784](https://github.com/tusen-ai/naive-ui/issues/3784).
+- `n-slider` adds `markFontSize` theme variable, closes [#3820](https://github.com/tusen-ai/naive-ui/issues/3820).
 
 ## 2.33.3
 

CHANGELOG.zh-CN.md

@@ -37,6 +37,7 @@
 - `n-transfer` 新增 `render-target-list` 属性
 - `n-select` 新增 `show-checkmark` 属性，关闭 [#3749](https://github.com/tusen-ai/naive-ui/issues/3749)
 - `n-tree` 新增 `animated` 属性，关闭 [#3784](https://github.com/tusen-ai/naive-ui/issues/3784)
+- `n-slider` 新增 `markFontSize` 主题变量，关闭 [#3820](https://github.com/tusen-ai/naive-ui/issues/3820)
 
 ## 2.33.3
 

build/loaders/convert-md-to-doc.js

@@ -61,7 +61,7 @@ function genAnchorTemplate (
       internal-scrollable
       :bound="16"
       type="block"
-      style="width: 128px; position: sticky; top: 32px; max-height: calc(100vh - 32px - 64px); height: auto;"
+      style="width: 192px; position: sticky; top: 32px; max-height: calc(100vh - 32px - 64px); height: auto;"
       offset-target="#doc-layout"
       :ignore-gap="${options.ignoreGap}"
     >
@@ -153,7 +153,7 @@ export default {
       }),
       contentStyle: computed(() => {
         return showAnchorRef.value
-          ? 'width: calc(100% - 164px); margin-right: 36px;'
+          ? 'width: calc(100% - 228px); margin-right: 36px;'
           : 'width: 100%; padding-right: 12px;'; 
       }),
       url: ${JSON.stringify(url)}
@@ -234,7 +234,7 @@ async function convertMd2ComponentDocumentation (
     <div :style="contentStyle">
       ${docMainTemplate}
     </div>
-    <div style="width: 128px;" v-if="showAnchor">
+    <div style="width: 192px;" v-if="showAnchor">
       ${
         demoInfos.length
           ? genDemosAnchorTemplate(demoInfos, hasApi, tokens)

src/slider/src/Slider.tsx

@@ -540,6 +540,7 @@ export default defineComponent({
     const cssVarsRef = computed(() => {
       const {
         self: {
+          markFontSize,
           railColor,
           railColorHover,
           fillColor,
@@ -590,7 +591,8 @@ export default defineComponent({
         '--n-rail-color': railColor,
         '--n-rail-color-hover': railColorHover,
         '--n-rail-height': railHeight,
-        '--n-rail-width-vertical': railWidthVertical
+        '--n-rail-width-vertical': railWidthVertical,
+        '--n-mark-font-size': markFontSize
       }
     })
     const themeClassHandle = inlineThemeDisabled

src/slider/src/styles/index.cssr.ts

@@ -29,6 +29,7 @@ import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-sc
 // --n-rail-color-hover
 // --n-rail-height
 // --n-rail-width-vertical
+// --n-mark-font-size
 export default c([
   cB('slider', `
     display: block;
@@ -105,6 +106,7 @@ export default c([
         right: unset;
         bottom: calc(var(--n-handle-size) / 2);
         left: 22px;
+        font-size: var(--n-mark-font-size);
       `, [
         cB('slider-mark', `
           transform: translateY(50%);

src/slider/styles/light.ts

@@ -21,6 +21,7 @@ const self = (vars: ThemeCommonVars) => {
   return {
     ...sizeVariables,
     fontSize,
+    markFontSize: fontSize,
     railColor,
     railColorHover: railColor,
     fillColor: primaryColor,