Bootstrap-slider custom handle

Question

I really don't understand why I can't manage to replace the original star handle by a picture of my own. Let's rely on that plunker to understand. I read the author's documentation on that matter: example 10

On the previous plunker I did as it's written that:

HTML:

<input id="ex10" type="text" data-slider-handle="custom"/>

CSS:

.slider-handle.custom {
  background: transparent url("http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-8/128/Accept-icon.png");
}

The url background linked to the picture I want to see as handle. (Replacing the default star).

As you can see here:

New picture with Alexandr's comment below: Doesn't seem to change anything.

I dont see your div .slider-handle.custom . You need #ex10 { //css } — Oleksandr Maliuta, Jan 23 '17 at 15:12
In this example http://embed.plnkr.co/D3GJQn/preview star it's before pseudo element — Oleksandr Maliuta, Jan 23 '17 at 16:09
I don't understand what you mean here. Tell me how you would proceed and I'll try it ! — BoobaGump, Jan 23 '17 at 16:20

score 2 · Accepted Answer · answered Jan 28 '17 at 14:05

Change this :

.slider-handle.custom::before {
  line-height: 20px;
  font-size: 20px;
  content: '\2605';
  color: #726204;
}

to this :

 .slider-handle.custom::before {
      line-height: 20px;
      font-size: 20px;
      content: "url-of-your-picture";
      color: #726204;
    }

You may have to do some adjustment to the line-height depending on the size of custom handle you want to use.

Jasmin Skopljak · Answer 2 · 2017-01-23T18:52:48.687

0

So if you instantiated slider then all you need to do is change your CSS

.slider-handle.custom {
  background: transparent none;
  /* Add your background image */
  background-image: url("http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-8/128/Accept-icon.png");
  background-size: contain;
}

/* Or display content like unicode characters or fontawesome icons */
.slider-handle.custom::before {
  line-height: 20px;
  font-size: 20px;
  /* Comment this because you will not use star */
  /*content: '\2605'; /*unicode star character*/
  color: #726204;*/
}

edited Jan 23 '17 at 18:52

answered Jan 23 '17 at 15:21

Jasmin Skopljak

19
4

I did. You can see it in the last screenshot from plunker. – BoobaGump Jan 23 '17 at 15:58

score 0 · Answer 3 · answered Mar 06 '18 at 15:37

0

You should override slider-handle.custom::before

.slider-handle.custom::before {
      display:none
}

answered Mar 06 '18 at 15:37

Anis D

761
11
25

Bootstrap-slider custom handle

3 Answers3