@chayns-components/core/lib/esm/components/slider/Slider.styles.js

A set of beautiful React components for developing your own applications with chayns.

import { motion } from 'motion/react';
import styled from 'styled-components';
export const StyledSlider = styled.div`
    width: 100%;
    height: 30px;
    cursor: ${_ref => {
  let {
    $isDisabled
  } = _ref;
  return $isDisabled ? 'default' : 'pointer';
}} !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
    opacity: ${_ref2 => {
  let {
    $isDisabled
  } = _ref2;
  return $isDisabled ? 0.5 : 1;
}};
`;
export const StyledSliderInput = styled(motion.input).attrs(_ref3 => {
  let {
    $isInterval,
    $value,
    $thumbWidth,
    $min,
    $max,
    theme
  } = _ref3;
  return {
    style: {
      pointerEvents: $isInterval ? 'none' : 'all',
      width: `calc(100% - ${$thumbWidth}px)`,
      background: !$isInterval ? `linear-gradient(
            to right,
            ${theme['409'] ?? ''} 0%,
            ${theme['409'] ?? ''}
            ${($value - $min) / ($max - $min) * 100}%,
            ${theme['403'] ?? ''}
            ${($value - $min) / ($max - $min) * 100}%,
            ${theme['403'] ?? ''}
        )` : undefined
    }
  };
})`
    position: absolute;
    border-radius: 100px;
    -webkit-appearance: none;

    outline: none;
    cursor: pointer !important;
    z-index: 2;
    appearance: none;

    // Slider thumb for chrome
    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 50px;
        height: 20px;
        cursor: pointer;
        opacity: 0;
        pointer-events: all;
        position: relative;
    }

    // slider thumb for firefox

    &::-moz-range-thumb {
        width: 50px;
        height: 20px;
        cursor: pointer;
        opacity: 0;
        pointer-events: all;
        position: relative;
    }
`;
export const StyledSliderThumb = styled.div.attrs(_ref4 => {
  let {
    $position,
    $isBigSlider
  } = _ref4;
  return {
    style: {
      left: `${$position}px`,
      height: `${$isBigSlider ? 0 : 20}px`
    }
  };
})`
    width: 20px;
    height: 20px;
    cursor: pointer;
    border-radius: 100px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 3;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    white-space: nowrap;
    top: 5px;

    transition: top 0.2s ease 0s;
`;
export const StyledSliderThumbLabel = styled.span.attrs(_ref5 => {
  let {
    $position,
    $isBigSlider,
    $width
  } = _ref5;
  return {
    style: {
      minWidth: `${$width}px`,
      top: `-${$isBigSlider ? 56 : 48}px`,
      left: `${$position}px`
    }
  };
})`
    pointer-events: none;
    color: #222;

    height: 20px;
    cursor: pointer;
    border-radius: 3px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    z-index: 3;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    white-space: nowrap;

    transition: top 0.2s ease 0s;

    &::after {
        background-color: inherit;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);
        content: '';
        height: 14px;
        position: absolute;
        width: 14px;
        z-index: -2;
        left: ${_ref6 => {
  let {
    $position
  } = _ref6;
  return $position * -1;
}}px;
        transform: rotate(225deg);
        bottom: -7px;
    }

    &::before {
        background-color: inherit;
        bottom: 0;
        content: '';
        left: 0;
        position: absolute;
        right: 0;
        border-radius: 3px;
        top: 0;
        z-index: -1;
    }
`;
//# sourceMappingURL=Slider.styles.js.map