archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(slider): slider display when hideThumb is true (#5087)

Browse Source 
* fix(slider): track fill start & end

* fix(theme): revise slider display with `hideThumb`

* fix(theme): handle isVertical case

* fix(slider): handle range case

* refactor(theme): simplify thumb related styles

* chore(changeset): add changeset
This commit is contained in:
աӄա 2025-03-28 02:03:16 +08:00 committed by GitHub
parent 6a8f4f0aea
commit 14fc373bd3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 33 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/funny-yaks-smoke.md Normal file
View File

@ -0,0 +1,6 @@
---
"@heroui/theme": patch
"@heroui/slider": patch
---
fixed slider display when `hideThumb` is `true` (#5085)

11
packages/components/slider/src/use-slider.ts
View File

@ -311,11 +311,22 @@ export function useSlider(originalProps: UseSliderProps) {
};
const getTrackProps: PropGetter = (props = {}) => {
const fillWidth = (endOffset - startOffset) * 100;
return {
ref: trackRef,
"data-slot": "track",
"data-thumb-hidden": !!originalProps?.hideThumb,
"data-vertical": isVertical,
...(hasSingleThumb
? {
"data-fill-start": fillWidth > 0,
"data-fill-end": fillWidth == 100,
}
: {
"data-fill-start": startOffset == 0,
"data-fill-end": startOffset * 100 + fillWidth == 100,
}),
className: slots.track({class: classNames?.track}),
...trackProps,
...props,

42
packages/core/theme/src/components/slider.ts
View File

@ -311,102 +311,92 @@ const slider = tv({
"w-7 mx-[calc((theme(spacing.7)-theme(spacing.5))/2)] border-y-[calc(theme(spacing.7)/2)]",
},
},
// color && !isVertical && hasSingleThumb
// color && !isVertical
{
color: "foreground",
isVertical: false,
hasSingleThumb: true,
class: {
track: "border-s-foreground",
track:
"data-[fill-start=true]:border-s-foreground data-[fill-end=true]:border-e-foreground",
},
},
{
color: "primary",
isVertical: false,
hasSingleThumb: true,
class: {
track: "border-s-primary",
track: "data-[fill-start=true]:border-s-primary data-[fill-end=true]:border-e-primary",
},
},
{
color: "secondary",
isVertical: false,
hasSingleThumb: true,
class: {
track: "border-s-secondary",
track: "data-[fill-start=true]:border-s-secondary data-[fill-end=true]:border-e-secondary",
},
},
{
color: "success",
isVertical: false,
hasSingleThumb: true,
class: {
track: "border-s-success",
track: "data-[fill-start=true]:border-s-success data-[fill-end=true]:border-e-success",
},
},
{
color: "warning",
isVertical: false,
hasSingleThumb: true,
class: {
track: "border-s-warning",
track: "data-[fill-start=true]:border-s-warning data-[fill-end=true]:border-e-warning",
},
},
{
color: "danger",
isVertical: false,
hasSingleThumb: true,
class: {
track: "border-s-danger",
track: "data-[fill-start=true]:border-s-danger data-[fill-end=true]:border-e-danger",
},
},
// color && isVertical && hasSingleThumb
// color && isVertical
{
color: "foreground",
isVertical: true,
hasSingleThumb: true,
class: {
track: "border-b-foreground",
track:
"data-[fill-start=true]:border-b-foreground data-[fill-end=true]:border-t-foreground",
},
},
{
color: "primary",
isVertical: true,
hasSingleThumb: true,
class: {
track: "border-b-primary",
track: "data-[fill-start=true]:border-b-primary data-[fill-end=true]:border-t-primary",
},
},
{
color: "secondary",
isVertical: true,
hasSingleThumb: true,
class: {
track: "border-b-secondary",
track: "data-[fill-start=true]:border-b-secondary data-[fill-end=true]:border-t-secondary",
},
},
{
color: "success",
isVertical: true,
hasSingleThumb: true,
class: {
track: "border-b-success",
track: "data-[fill-start=true]:border-b-success data-[fill-end=true]:border-t-success",
},
},
{
color: "warning",
isVertical: true,
hasSingleThumb: true,
class: {
track: "border-b-warning",
track: "data-[fill-start=true]:border-b-warning data-[fill-end=true]:border-t-warning",
},
},
{
color: "danger",
isVertical: true,
hasSingleThumb: true,
class: {
track: "border-b-danger",
track: "data-[fill-start=true]:border-b-danger data-[fill-end=true]:border-t-danger",
},
},
],