UNPKG

@jengaui/slider

Version:

Jenga UI Slider component in React

11 lines (6 loc) 1.62 kB
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var tastycss = require('tastycss'); var jsxRuntime = require('react/jsx-runtime'); tastycss.tasty({styles:{top:"2x",width:"2x",height:"2x",fill:{"":"#purple",hovered:"#purple-text",dragged:"#purple",disabled:"#dark-04"},cursor:"pointer",shadow:{"":"0px 2px 4px #dark.2",dragged:"inset 0 0 0 2px #purple-text, 0px 2px 4px #dark.2"},radius:"50%",border:{"":null,focused:"3px solid #purple-04"},transition:"theme"}});tastycss.tasty({styles:{top:"1.875x",position:"absolute",fill:{"":"#dark-05"},height:"2px",width:"100%",radius:!0}});tastycss.tasty({styles:{position:"absolute","@start-range":{"":"@thumb-0-value",single:"0"},"@end-range":{"":"(1 - @thumb-1-value)",single:"(1 - @thumb-0-value)"},left:"(@start-range * 100%)",right:"(@end-range * 100%)",height:"2px",fill:{"":"#purple",disabled:"#dark-04"},radius:!0}});var l=tastycss.tasty({styles:{}}),i=tastycss.tasty({styles:{}});tastycss.tasty({styles:{position:"relative",width:"100% - 2x",height:"4x"}});tastycss.tasty({as:"section",styles:{position:"relative",display:"flex",gap:{"":"0",inputs:"1x"},flexDirection:{"":"column",inputs:"row"},alignItems:"center",width:"100%",padding:{"":"0",sideLabel:"0.75x top"}}});tastycss.tasty({styles:{display:"flex",alignItems:"center",flexDirection:"column",width:"100%"}});function k(a){let{state:n,ranges:d,values:s=[]}=a;if(!s.length)return null;let p=(e,r)=>{let[u,x]=d.map(g=>n.getThumbValue(g));return r>=u&&r<=x};return jsxRuntime.jsx(l,{children:s.map((e,r)=>jsxRuntime.jsx(i,{mods:{active:p(e,r)},children:e},e))})} exports.Gradation = k;