@antv/f6-plugin/es/time-bar/ui/slider/simple-slider.js

F6 plugin

import { createSegmentNode } from '@antv/f6-ui';
import { SIMPLE_BACKGROUND_STYLE, SIMPLE_HANDLE_STYLE, FOREGROUND_STYLE, TEXT_STYLE } from '../../utils/const';
export default function createSimpleSlider(option) {
  var width = option.width,
      _a = option.height,
      height = _a === void 0 ? 4 : _a;
  var handlerStyle = Object.assign({}, SIMPLE_HANDLE_STYLE, option.handlerStyle);
  var backgroundStyle = Object.assign({}, SIMPLE_BACKGROUND_STYLE, option.backgroundStyle);
  var foregroundStyle = Object.assign({}, FOREGROUND_STYLE, option.foregroundStyle);
  var textStyle = Object.assign({}, TEXT_STYLE, option.textStyle);
  var html = "\n    <div class='slider-bg'>\n      <div class=\"slider-inner\"></div>\n      <div class='control left-control'>\n        <div class='text'>0</div>\n      </div>\n      <div class='control right-control'>\n        <div class='text'>0</div>\n      </div>\n    </div>\n  ";
  var css = "\n    .slider-bg {\n      width: " + width + ";\n      height: " + height + ";\n      background: " + backgroundStyle.fill + ";\n      opacity: " + backgroundStyle.opacity + ";\n      border-radius: " + backgroundStyle.radius + ";\n      z-index: 10;\n      margin-top: 30;\n    }\n    \n    .slider-inner{\n      position: absolute;\n      width: " + width + ";\n      height: " + height + ";\n      border-radius: " + height / 2 + ";\n      background: " + foregroundStyle.fill + ";\n      background-opacity: " + foregroundStyle.opacity + "\n      z-index: 1;\n    }\n\n    .control {\n      position: absolute;\n      top: " + (-handlerStyle.radius / 2 + height / 2) + ";\n      width: " + handlerStyle.radius + ";\n      height: " + handlerStyle.radius + ";\n      border-radius: " + handlerStyle.radius / 2 + ";\n      background: " + handlerStyle.fill + ";\n      border: " + handlerStyle.lineWidth + " solid " + handlerStyle.stroke + ";\n      z-index: 2;\n    }\n\n    .text{\n      position: absolute;\n      left: " + handlerStyle.radius / 2 + ";\n      top: -" + (handlerStyle.radius / 2 + textStyle.fontSize / 2) + ";\n      width: 0;\n      color: " + textStyle.fill + ";\n      font-size: " + textStyle.fontSize + ";\n      text-align: center;\n    }\n\n    text{\n      opacity: " + textStyle.opacity + ";\n      white-space: nowrap;\n    }\n    \n    .left-control {\n      left: 0;\n    }\n\n    .right-control{\n      left: " + (width - handlerStyle.radius) + ";\n    }\n  ";
  var node = createSegmentNode(html, css);
  return {
    slideContainer: node,
    leftControl: node.query('.left-control'),
    rightControl: node.query('.right-control'),
    slideInner: node.query('.slider-inner')
  };
}