Как изменить курсор ползунка? - PullRequest
Новая
       2

Как изменить курсор ползунка?

0 голосов
/ 09 июля 2020

У меня есть ползунок диапазона типа ввода. Я хотел бы заменить синий кружок («курсор») на кубик. Я пробовал контент: '\ 01F3B2', но он не работает. Когда я добавляю 

  #range::before {
    content:'\01F3B2'
  }

, я вижу кубики: enter image description here

But I don't find the property that allows to replace the cursor. Can you help ?

Thanks a lot.

The code :

 Приз    {литерал} $ ('# вход слайд-контейнера # диапазон'). Slider ();  #slidecontainer {margin: 0 auto; цвет фона: # afe0fc; заполнение: 1.5em; радиус границы: 5 пикселей; } / * Стилизация большого пальца * / #range :: - webkit-slider-thumb {-webkit-appearance: none; ширина: 20 пикселей; высота: 20 пикселей; фон: # 078dd8; радиус границы: 50%; курсор: -moz-grab; курсор: -webkit-grab; }  {/ literal}

Ответы [ 4 ]

0 голосов
/ 09 июля 2020

Наконец, сделал вот что: выкладываю код, может он кому-то поможет: 

<div class="panel-body">
    <div id="slidecontainer" class="container-fluid">
        <label for="prix">Prix</label>
        <input
            id="range"
            type="range"
            data-slider-handle="custom"
            data-slider-ticks-snap-bounds="20"
            data-slider-ticks="[0, 100, 200, 300, 400]"
            data-slider-ticks-labels='["0€", "100€", "200€", "300€", "400€"]'
        />
    </div>
</div>
    
{literal}

<script>
    $('#slidecontainer input#range').slider({step: 10, min: 0, max: 500});   
</script>

<style>
   .slider-handle.custom {
    background: transparent none;
    }

/* Or display content like unicode characters or fontawesome icons */
    .slider-handle.custom::before {
    line-height: 10px;
    font-size: 40px;
    content: '\01F3B2';
    color: #046072;
    }
    .slider-tick.custom::before {
        line-height: 20px;
        font-size: 20px;
        content: '\002684';
        color: #046072;
    }
</style>
{/literal}

введите описание изображения здесь

0 голосов
/ 09 июля 2020

Я считаю, что ваш селектор был неправильным. Попробуйте это: 

  #slidecontainer {
        margin: 0 auto;
        background-color: #afe0fc;
        padding: 1.5em;
        border-radius: 5px;
    }
    
    /* Styling the thumb */
    #range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 30%;
        height: 20px;
        background: #078dd8;
        border-radius: 50%;
        cursor: -moz-grab;
        cursor: -webkit-grab;
      cursor:move;
      
  }
#range::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

#range::-moz-range-thumb {
    content:'\01F3B2'
      width:15px;
   height:15px;
  }
<div class="panel-body">
    <div id="slidecontainer" class="container-fluid">
        <label for="prix">Prix</label>
        <input
            id="range"
            type="range"
            data-provide="slider"
            data-slider-ticks="[0, 100, 200, 300, 400, 500]"
            data-slider-ticks-snap-bounds="10"
            data-slider-ticks-labels='["0€", "100€", "200€", "300€", "400€", "500€"]'
        />
      </div>
</div>
0 голосов
/ 09 июля 2020

попробуйте это 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 24px;
  border: 0;
  background: url('contrasticon.png');
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 23px;
  height: 24px;
  border: 0;
  background: url('contrasticon.png');
  cursor: pointer;
}
</style>
</head>
<body>

<h1>Range Slider Picture</h1>

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>

</body>
</html>
//image your choice
0 голосов
/ 09 июля 2020

Используйте это в CSS. 

.start{cursor:pointer!important;}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...