From 33bd4f57a679bf61f098e11d7d66c8b2e5cf0ba2 Mon Sep 17 00:00:00 2001 From: doryan04 Date: Sun, 25 Feb 2024 19:52:36 +0400 Subject: [PATCH] ADDED: slider label but it's not done --- app/page.tsx | 99 +------------------ .../input-components/slider/slider.tsx | 55 +++++++++-- src/styles/generics.css | 23 +++++ src/styles/generics.css.map | 2 +- src/styles/input-styles/slider.sass | 23 ++++- 5 files changed, 94 insertions(+), 108 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 922c6d2..75c910d 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,109 +1,14 @@ import React from 'react'; import { Card } from '../src/primitive-components/card/card'; -import { - Button, - FAB, - IconButton, -} from '../src/primitive-components/components'; import { CardFooter } from '../src/primitive-components/card/card-footer'; -import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button'; -import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons'; +import { Slider } from '../src/primitive-components/input-components/slider/slider'; export default function Page() { return (
- - - - - - - - - - - - - - - - - - Label 1 - - - Not selectable - - - Label 3 - - Label 4 - +
diff --git a/src/primitive-components/input-components/slider/slider.tsx b/src/primitive-components/input-components/slider/slider.tsx index 4b18604..3847537 100644 --- a/src/primitive-components/input-components/slider/slider.tsx +++ b/src/primitive-components/input-components/slider/slider.tsx @@ -1,5 +1,6 @@ 'use client'; +import { Typography } from '../../typography/typography'; import { InputLayout } from '../input-layout/input-layout'; import React, { ChangeEvent, @@ -14,33 +15,71 @@ interface SliderProps extends InputHTMLAttributes { options?: number[]; } +function fractionCalc(current: number | string, max: number | string): number { + const _current = isNaN(parseInt(current as string)) + ? 50 + : parseInt(current as string); + const _max = isNaN(parseInt(max as string)) ? 100 : parseInt(max as string); + + return (_current / _max) * 100; +} + +function gradientStyle(value: number): string { + return `linear-gradient( to right, var(--md-sys-color-primary) ${value}%, var(--md-sys-color-surface-container-highest) ${value}%)`; +} + export const Slider = forwardRef( ({ options, ...props }, ref) => { const sliderId = useId(); const [isChrome, setIsChrome] = useState(false); + const [value, setValue] = useState(props.defaultValue ?? 50); useLayoutEffect(() => { setIsChrome(navigator.userAgent.indexOf('AppleWebKit') != -1); }, []); + if (isChrome) { + const initialFraction = fractionCalc( + (props.value as string) ?? (props.defaultValue as string), + props.max as string, + ); + + if (props.style === undefined) { + props.style = {}; + } + + props.style.background = gradientStyle(initialFraction); + } + + const webkitProgress = (event: ChangeEvent) => { + if (isChrome) { + const fraction = fractionCalc( + (event.target.value as string) ?? + (event.target.defaultValue as string), + event.target.max, + ); + + event.target.style.background = gradientStyle(fraction); + } + }; + return (
+
+ + {value} + +
) => { props.onChange?.apply(this, props?.onChange?.prototype); + setValue(event.target.value); if (isChrome) { - const fraction = - (parseInt(event.target.value) / - parseInt(event.target.max)) * - 100; - event.target.style.background = `linear-gradient(\ - to right, var(--md-sys-color-primary) ${fraction}%, \ - var(--md-sys-color-surface-container-highest) ${fraction}%\ - )`; + webkitProgress(event); } }} ref={ref} diff --git a/src/styles/generics.css b/src/styles/generics.css index 01d1ff4..6a31f57 100644 --- a/src/styles/generics.css +++ b/src/styles/generics.css @@ -925,6 +925,29 @@ div.m3.m3-slider-container { display: flex; align-items: center; } +div.m3.m3-slider-container div.m3.m3-slider-label { + display: inline-flex; + align-items: center; + justify-content: center; + position: absolute; + pointer-events: none; +} +div.m3.m3-slider-container div.m3.m3-slider-label::before { + content: ""; + width: 28px; + rotate: 45deg; + aspect-ratio: 1; + position: absolute; + border-radius: 14px 14px 0 14px; + background-color: var(--md-sys-color-primary); +} +div.m3.m3-slider-container div.m3.m3-slider-label > label.m3.m3-typography { + display: inline; + font-weight: 500; + position: absolute; + font-size: 12px !important; + color: var(--md-sys-color-on-primary); +} div.m3.m3-slider-container > datalist { display: none; } diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map index 89f292e..3277102 100644 --- a/src/styles/generics.css.map +++ b/src/styles/generics.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","typography.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"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;AArDR;EACI;;AAEJ;EACI;;AAmDI;EACI;;AAER;EACI;;AA3DR;EACI;;AAEJ;EACI;;AA4DQ;EACI;;AAGR;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;ACjGhB;EZCI;EACA;EACA;EYAA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;ACtEhB;EACI;EACA;EACA;;AAEA;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EbjBI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAuCI;;AAvDJ;EAII;;AAHA;EACI;;AAIR;EACI;;AAkDJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EbhCI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhBA;EAII;;AAHA;EACI;;AAIR;EACI;;;ACVR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AC5JhB;EfMI;EACA;EACA;EACA;EACA;EACA;EACA;;AeTA;EfmBA;EACA;EACA;EACA;EACA;;AepBA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAER;EfbI,SecgB;EfbhB;EACA;EecA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EAII;;AAHA;EACI;;AAKJ;EACI;;AAER;EAII;;AAHA;EACI;;AAIR;EACI;;AAGA;EACI;;AAER;EfrDA,SesDoB;EfrDpB;EACA;EesDI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAER;EACI;;AAEA;EACI;;AAER;EACI;;AAEJ;EACI;;AAEA;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;ACjGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EhBFA;EACA;EACA;EACA;EACA;;AgBCA;EhBLA;EACA;EACA;EACA;EACA;EgBII;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EhBrFJ;EACA;EACA;EACA;EACA;EgBoFQ;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EAnLJ;EACA;EACA;EACA;EAmLQ;;AAEJ;EAxLJ;EACA;EACA;EACA;EAwLQ;;AAEJ;EACI;;AAEJ;EhBlLJ;EACA;EACA;EACA;EACA;;AgBiLI;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;AlB3LhB;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EExBI;EACA;EACA;EACA;EACA;EFuBA;EACA;EACA;EACA;EACA;EACA;;AAEA;EEhDA,SFiDoB;EEhDpB;EACA;EFiDI;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"generics.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","typography.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"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;AArDR;EACI;;AAEJ;EACI;;AAmDI;EACI;;AAER;EACI;;AA3DR;EACI;;AAEJ;EACI;;AA4DQ;EACI;;AAGR;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;ACjGhB;EZCI;EACA;EACA;EYAA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;ACxEhB;EACI;EACA;EACA;;AAEA;EbzBA,Sa0BoB;EbzBpB;EACA;EayBI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EbpCI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA0DI;;AA1EJ;EAII;;AAHA;EACI;;AAIR;EACI;;AAqEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EbnDI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhBA;EAII;;AAHA;EACI;;AAIR;EACI;;;ACVR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AC5JhB;EfMI;EACA;EACA;EACA;EACA;EACA;EACA;;AeTA;EfmBA;EACA;EACA;EACA;EACA;;AepBA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAER;EfbI,SecgB;EfbhB;EACA;EecA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EAII;;AAHA;EACI;;AAKJ;EACI;;AAER;EAII;;AAHA;EACI;;AAIR;EACI;;AAGA;EACI;;AAER;EfrDA,SesDoB;EfrDpB;EACA;EesDI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAER;EACI;;AAEA;EACI;;AAER;EACI;;AAEJ;EACI;;AAEA;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;ACjGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EhBFA;EACA;EACA;EACA;EACA;;AgBCA;EhBLA;EACA;EACA;EACA;EACA;EgBII;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EhBrFJ;EACA;EACA;EACA;EACA;EgBoFQ;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EAnLJ;EACA;EACA;EACA;EAmLQ;;AAEJ;EAxLJ;EACA;EACA;EACA;EAwLQ;;AAEJ;EACI;;AAEJ;EhBlLJ;EACA;EACA;EACA;EACA;;AgBiLI;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;AlB3LhB;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EExBI;EACA;EACA;EACA;EACA;EFuBA;EACA;EACA;EACA;EACA;EACA;;AAEA;EEhDA,SFiDoB;EEhDpB;EACA;EFiDI;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"generics.css"} \ No newline at end of file diff --git a/src/styles/input-styles/slider.sass b/src/styles/input-styles/slider.sass index 53d5dc3..9eface0 100644 --- a/src/styles/input-styles/slider.sass +++ b/src/styles/input-styles/slider.sass @@ -19,13 +19,32 @@ background: var(--md-sys-color-primary) transition: .2s cubic-bezier(0.2, 0, 0, 1) - - div.m3.m3-slider-container height: 20px display: flex align-items: center + div.m3.m3-slider-label + @include center(inline-flex) + position: absolute + pointer-events: none + + &::before + content: "" + width: 28px + rotate: 45deg + aspect-ratio: 1 + position: absolute + border-radius: 14px 14px 0 14px + background-color: var(--md-sys-color-primary) + + & > label.m3.m3-typography + display: inline + font-weight: 500 + position: absolute + font-size: 12px !important + color: var(--md-sys-color-on-primary) + & > datalist display: none