Question

Я пытаюсь создать круглый слайдер с помощью librery roundSlider. js, фон которого на пути многоцветный. Я попытался использовать линейный градиент, но результат не очень хороший, потому что, когда я начинаю перемещать ползунок с помощью гадлера, цвета фона начинают двигаться, а некоторые исчезают.

Это код, который у меня есть:

  $(document).ready(function () {

    $("#shape").roundSlider({
    radius: 80,
    width: 8,
    min: 0,
    max: 100,
    handleSize: "+16",
    circleShape: "pie",
    handleShape: "dot",
    sliderType: "min-range",
    startAngle: 315,
    value: 24,
    disabled: false
});
        });

 .rs-range-color {
  background: linear-gradient(to right, yellow 20%, blue 20%, blue 40%, red 40%, red 60%, green 60%, green 80%, brown 80%, brown 100%);
 }

 .rs-path-color {
   /*background-color: #C2E9F7;*/
  background: linear-gradient(to right, yellow 20%, blue 20%, blue 40%, red 40%, red 60%, green 60%, green 80%, brown 80%, brown 100%);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
 }

 .rs-handle {
   background-color: #C2E9F7;
   padding: 7px;
   border: 2px solid #C2E9F7;
 }

 .rs-handle.rs-focus {
   border-color: #33B5E5;
 }

 .rs-handle:after {
   border-color: #33B5E5;
   background-color: #33B5E5;
 }

 .rs-border {
   border-color: transparent;
 }

 .rs-tooltip-text {
   font-family: Roboto, sans-serif;
   font-size: 20px;
   border-radius: 7px;
   transition: background 0.02s ease-in-out;
   color: #33B5E5;
 }

 .rs-tooltip-text:before {
   position: absolute;
   left: -10px;
   top: -18px;
   content: 'DISCOUNT';
   font-size: 12px;
 }

 .rs-tooltip-text:after {
   position: absolute;
   left: 10px;
   top: 48px;
   content: '';
   font-size: 12px;
 }


.container{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Roboto, sans-serif;
  padding: 20px;
  border: 1px solid;
}

/* Solution for inner circle with shadow */
#shape:after {
  content: " ";
  display: block;
  height: calc(100% - 40px); /* here 40 is the gap between the outer and inner circle */
  width: calc(100% - 40px);
  position: absolute;
  top: 20px;  /* divide the gap value by 2 */
  left: 20px;
  z-index: 9; /* tooltip z-index is 10, so we put less than that value */
  border-radius: 1000px;
  box-shadow: 0 0 10px -2px;
}

/* Solution for bottom triangle out issue */
#shape .rs-overlay {
    height: calc(50% + 5px);
    width: calc(50% + 5px);
    top: -5px;
    left: -5px;
    border-radius: 1000px 0 0 0;
}

<!DOCTYPE html>
<html>
<head>
    <title>RoundSlider - A sample testing</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/round-slider@1.4.1/dist/roundslider.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/round-slider@1.4.1/dist/roundslider.min.js"></script>
</head>
<body style="padding: 10px 0 0 20px; font-family: monospace;">

        <div class="container">
            <div class="control">
                <div id="shape"></div>
            </div>
        </div>
    
</body>
<html>

Когда вы запустите приведенный выше код, вы увидите, как цвет фона путей перемещается, когда я перемещаю обработчик, в этом проблема. Я бы хотел, чтобы фон оставался неизменным. Другими словами, я хотел бы, чтобы фоновый путь был градиентом с 3 или более цветами и чтобы этот фон покрывал 100% ползунка. Я не хочу, чтобы цвета двигались или были удалены, чтобы освободить место для других.

Soundar · Answer 1 · 01 апреля 2020

В roundSlider svgMode был доступен, когда слайдер был построен элементами SVG. Таким образом, используя его, вы можете применить SVG-градиент к элементу range и path. Также здесь эти элементы являются одним элементом, поэтому вы не столкнетесь с этой проблемой.

Здесь я обновил демо-версию на основе вашего сценария, проверьте ниже:

https://jsfiddle.net/soundar24/6se2tmp9/

В этой демонстрации я не установил pathColor, потому что если rangeColor и цвет пути одинаковы, то вы не найдете никакой разницы.

Кроме того, так как это это только SVG-градиент по умолчанию, поэтому в зависимости от ваших требований вы можете изменить этот линейный градиент SVG.

РЕДАКТИРОВАТЬ 1:

Исходя из ваших комментариев, вам необходимо использовать coni c градиент. В SVG нет явной опции для градиента coni c, но все же вы можете найти способы достижения этого.

В качестве альтернативы я использовал градиент CSS coni c чтобы достичь этого. Проверьте приведенную ниже демонстрацию:

https://jsfiddle.net/soundar24/6se2tmp9/2/
Также я сделал обходной путь для создания сегментов диапазона SVG на пути roundSlider. Это также похоже на ваше требование. Проверьте приведенную ниже демонстрацию:

https://jsfiddle.net/soundar24/8pgo9ce7/

Исправлен круглый слайдер с многоцветным фоном

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

https://jsfiddle.net/soundar24/6se2tmp9/

РЕДАКТИРОВАТЬ 1: