title: How to customize ion-range in ionic 5?
body: <p>I am looking for a solution with my current issue regarding on how to customize the <code>ion-range</code> based on the wireframe. As you can see below the difference between the wireframe and the actual worked I made.</p>
  <p><strong>Wireframe Design</strong></p>
  <p><a href="https://i.stack.imgur.com/EkpVG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EkpVG.png" alt="wireframe" /></a></p>
  <p><strong>My actual work</strong></p>
  <p><a href="https://i.stack.imgur.com/FYKTI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FYKTI.png" alt="enter image description here" /></a></p>
  <p>Above, you can see the difference between the two. My question is, is there anyway or solution that I can do to get the actual look of the wireframe. Based on the wireframe, as the user moves the tick, the label aligned with the tick should be color blue also.</p>
  <p>These are my codes I used and produced my actual work.</p>
  <p><strong>.html</strong></p>
  <pre><code>   &lt;div class=&quot;slidecontainer&quot;&gt;
      &lt;ion-range 
          class=&quot;range-position&quot;
          min=&quot;5&quot; 
          max=&quot;100&quot; 
          dualknobs=&quot;true&quot;
          pin=&quot;false&quot;
          snaps=&quot;true&quot;
          ticks=&quot;false&quot;
          value=&quot;0&quot; 
          snaps color=&quot;primary&quot;
          list='tickmarks'&gt;
      &lt;/ion-range&gt;
  
      &lt;div id=&quot;tickmarks&quot; class=&quot;tick-position&quot;&gt;
          &lt;p&gt;5&lt;/p&gt;
          &lt;p&gt;10&lt;/p&gt;
          &lt;p&gt;25&lt;/p&gt;
          &lt;p&gt;50&lt;/p&gt;
          &lt;p&gt;75&lt;/p&gt;
          &lt;p&gt;100&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>.scss</strong></p>
  <pre><code>// Customize Slider
     #tickmarks {
     display: flex;
     justify-content: space-between;
     padding: 0 25px;
     }
  
     #tickmarks p {
      position: relative;
      display: flex;
      justify-content: center;
      text-align: center;
      width: 1px;
      background: #ccd3da;
      height: 10px;
      line-height: 40px;
      margin: 0 0 20px 0;
      font-family: 'Archivo';
      font-size: 12px;
     }
  </code></pre>
  <p>Hope you can help so that I can move forward with my task. Thank you so much</p>