JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Slider › Customize scale labels and tick marks
Tagged: splitter color
- This topic has 4 replies, 2 voices, and was last updated 1 year, 2 months ago by Ali Karaibrahim.
-
AuthorPosts
-
January 11, 2019 at 10:54 am #99428adminKeymaster
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 #99431adminKeymasterHi 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.comAugust 24, 2023 at 5:53 am #108620Ali KaraibrahimParticipantHi,
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>
<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 #108621svetoslav_borislavovParticipantHi,
Here are the correct smart CSS variables that need to be changed:
https://codepen.io/svetoslavb04/pen/YzdXgzqI hope this helps!
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/August 24, 2023 at 7:26 am #108622Ali KaraibrahimParticipantMr.Borislavov
Thank you
- To show only the ticks with labels, please set
-
AuthorPosts
- You must be logged in to reply to this topic.