1

I have created slider with ion range slider its working good but not expected.

please see fiddle here:

[jsfiddle]: https://jsfiddle.net/rudratosh/7wg1p86e/3/
https://jsfiddle.net/rudratosh/7wg1p86e/3/

i am trying to build something like given in cut slider. please follow the link:

[ref]: (https://www.jamesallen.com/loose-diamonds/all-diamonds/)
https://www.jamesallen.com/loose-diamonds/all-diamonds/

what i am not able to do is, when i click over line and text it's not sliding properly. please see both the links. also tried with multiple slider like noui slider and others but nothing worked.

if someone can change current fiddle so or suggest some other code will be appreciated.

rudra sh
  • 17
  • 5

1 Answers1

0

Simply add this CSS in your fiddle and check..

.irs--round .irs-line {
  height: 31px;
  background-color: transparent;
}

.irs--round .irs-line:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #dee4ec;
  z-index: 0;
}
Asfan Shaikh
  • 759
  • 5
  • 9
  • not working... are you getting the problem. the problem is whenever i click on any label it should stick with the same example if i click to fair it must be active but happening is whenever i am clicking left slide of fair or other label its working fine but on click of right side it jumped over the next label that is the main problem. – rudra sh Oct 20 '19 at 08:20