JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Slider › Customize scale labels and tick marks

Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 11, 2019 at 10:54 am #99428
    admin
    Keymaster

    Hi guys, how can i hide the tick marks on the Slider that don’t have a label ? I want to see only the ticks with labels on the scale. Also i want to change the color of the tick marks. That would be great. Thanks !

    January 14, 2019 at 5:53 am #99431
    admin
    Keymaster

    Hi hansT,

    • To show only the ticks with labels, please set ticks-visibility="major".
    • The color of tick marks can be set using the CSS variable --smart-tick-color, i.e.: 
      <style type="text/css">
    smart-slider {
        --smart-tick-color: red;
    }
</style>

    Best regards,
    Dimitar
    Smart HTML Elements Team
    https://www.htmlelements.com

    August 24, 2023 at 5:53 am #108620
    Ali Karaibrahim
    Participant

    Hi,

    I want to change splitter bar and text color.

    I can’t change  splitter header background color ( I think that style element is “–smart-surface” )

    I can change splitter header text ( –smart-surface-color )

    This is sample code:
    <div>
    <div><!DOCTYPE html></div>
    <div><html xmlns=”http://www.w3.org/1999/xhtml”></div&gt;
    <div><head></div>
    <div>    <title>Splitter Nested Splitters</title></div>
    <div>    <meta charset=”utf-8″ /></div>
    <div>    <meta http-equiv=”X-UA-Compatible” content=”IE=edge” /></div>
    <div>    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /></div>
    <div>    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″ /></div>
    <script type=”module” src=”./node_modules/smart-webcomponents/source/modules/smart.splitter.js”></script>
    <div>    <link rel=”stylesheet” type=”text/css” href=”./node_modules/smart-webcomponents/source/styles/smart.default.css” /></div>
    <div></div>
    <style type=”text/css”>
    <div>     smart-splitter {</div>
    <div>      width: 100%;</div>
    <div>      height: 100vh;</div>
    <div></div>
    <div>    –smart-surface-color:  Blue;</div>
    <div>    –smart-surface: Red;</div>
    <div></div>
    <div>    }</div>
    <div></div>
    <div>  </style></div>
    <div></head></div>
    <div><body class=”viewport”></div>
    <div>  <smart-splitter id=”horizontalSplitter” resize-mode=”adjacent”></div>
    <div>    <smart-splitter-item size=”25%”>Left</smart-splitter-item></div>
    <div>    <smart-splitter-item>Middle</smart-splitter-item></div>
    <div>    <smart-splitter-item size=”25%”>Right</smart-splitter-item></div>
    <div></smart-splitter></div>
    <div></div>
    <div>    <script></div>
    <div></div>
    <div></div>
    <div></div>
    <div>      window.onload = function () {</div>
    <div>          const splitter = document.getElementById(‘horizontalSplitter’);</div>
    <div></div>
    <div></div>
    <div>      }</div>
    <div>    </script></div>
    <div></div>
    <div></body></div>
    <div></html></div>
    </div>
    <div></div>
    <div></div>
    <div></div>

    August 24, 2023 at 7:03 am #108621
    svetoslav_borislavov
    Participant

    Hi,

    Here are the correct smart CSS variables that need to be changed:
    https://codepen.io/svetoslavb04/pen/YzdXgzq

    I hope this helps!

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    August 24, 2023 at 7:26 am #108622
    Ali Karaibrahim
    Participant

    Mr.Borislavov

    Thank you

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.