franken-ui/dist/uikit/stylings/slider.js

Franken UI is an HTML-first, open-source library of UI components based on the utility-first Tailwind CSS with UIkit 3 compatibility. The design is based on shadcn/ui ported to be framework-agnostic.

import merge from 'lodash/merge.js';
export const rules = {
    '.uk-slider': { WebkitTapHighlightColor: 'transparent' },
    '.uk-slider-container': { overflow: ['hidden', 'clip'] },
    '.uk-slider-container-offset': {
        margin: '-11px -25px -39px -25px',
        padding: '11px 25px 39px 25px'
    },
    '.uk-slider-items': {
        willChange: 'transform',
        position: 'relative',
        touchAction: 'pan-y'
    },
    '.uk-slider-items:not(.uk-grid)': {
        display: 'flex',
        margin: '0',
        padding: '0',
        listStyle: 'none',
        WebkitTouchCallout: 'none'
    },
    '.uk-slider-items.uk-grid': { flexWrap: 'nowrap' },
    '.uk-slider-items > *': {
        flex: 'none !important',
        boxSizing: 'border-box',
        maxWidth: '100%',
        position: 'relative'
    }
};
export const addHooks = (args) => {
    const { hooks } = args;
    const defaultHooks = {
        'hook-slider': {},
        'hook-misc': {}
    };
    const _hooks = merge(defaultHooks, hooks);
    return {
        '.uk-slider': {
            ..._hooks['hook-slider']
        },
        ..._hooks['hook-misc']
    };
};