sliderInput

Author

Will Gammerdinger

Below is a key for the many of the elements that can be altered within the sliderInput():

**Input slider key.** The bolded black text is the element you wish to style. The blue text is if you want to style *all* elements with the same style. The green text is if you want to *target a specific element* by their `inputID`. To do this, you would replace `<inputID>` with a input widget’s `inputID`.

It gets slightly more complicated with a slider range within the sliderInput():

**Input slider key with range.** The bolded black text is the element you wish to style. The blue text is if you want to style *all* elements with the same style. The green text is if you want to *target a specific element* by their `inputID`. To do this, you would replace `<inputID>` with a input widget’s `inputID`.

Jump to the following sections:

Slider Label
Slider Handle
Slider Handles with Range
Slider Minimum
Slider Maximum
Slider Minimum and Maximum
Value of Slider Handle
Value of Slider Handle with Range
Slider Bar
Filled Portion of the Bar
Text on the Tick Marks
Major Tick Marks
Minor Tick Marks

Slider Label

An example CSS entry for the slider label is below:

/* Slider Label */
.shiny-input-container:has(.js-range-slider) > label{
  height: 100px;
  width: 200px;
  background-color: red;
  color: orange;
  font-family: Monospace;
  font-size: 20px;
  font-style: italic;
  font-weight: 100;
  border-color: green;
  border-radius: 10px;
  border-style: dashed;
  border-width: 5px;
  padding: 1px 2px 3px 4px;
  opacity: 50%;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  text-shadow: -3px -3px 2px tomato;
}

Note

In order to target a single inputID, replace <inputID> with the input widgets inputID below:

/* Slider Label for a specific <inputID> */
#<inputID>-label{
  ...
}

Argument	Note
`height`	Height of the slider label box (reference)
`width`	Width of the slider label box (reference)
`background-color`	The background color for the text space (reference)
`color`	The color of the text (reference)
`font-family`	The font used (reference)
`font-size`	The size of the font (reference)
`font-style`	Whether the font is `normal` or `italic` (reference)
`font-weight`	How thick or bold the font is (reference)
`border-color`	Color of the border (reference)
`border-radius`	How curved the radius of the corners are (reference)
`border-style`	Style of the border (reference)
`border-width`	Width of the border (reference)
`padding`	How much space to leave around the text(reference)
`opacity`	Opacity of the label (reference)
`box-shadow`	The shadow of the box outlining the text space (reference)
`text-shadow`	The shadow of the text within the text space (reference)

Slider Handle

An example CSS entry for the slider handle is below:

/* Slider Handle */
.irs--shiny .irs-handle{
  height: 22px; 
  width: 22px;
  background-color: pink;
  border-width: 2px;
  border-radius: 10px;
  border-style: solid;
  border-color: green;
  opacity: 70%;
  cursor: pointer;
  box-shadow: 4px 4px 8px purple;
}

Note

In order to target a single inputID, replace <inputID> with the input widgets inputID below:

/* Slider Handle for a specific <inputID> */
.shiny-input-container:has(#<inputID>) .irs-handle{
  ...
}

Argument	Note
`height`	Height of the slider handle (reference)
`width`	Width of the slider handle (reference)
`background-color`	Color of the inner circle of the slider handle (reference)
`border-width`	Width of the border (reference)
`border-radius`	How curved the radius of the slider handle is (reference)
`border-style`	Style of the border (reference)
`border-color`	Color of the corder (reference)
`opacity`	Opacity of the slider handle (reference)
`cursor`	Image of cursor (reference)
`box-shadow`	The shadow of the slider handle (reference)

Hover pseudo-class

The default sliderInput() changes slight shades as you hover over it. If you would like to edit this behavior you will need to use the :hover pseudo-class:

/* While hovering over the slider handle*/
.irs--shiny .irs-handle:hover{
  cursor: grab;
}

The options available to the hover pseudo-class are the same as for the normal slider handle.

Active pseudo-class

You can also alter the the slider handle while you are dragging it by using the :active pseudoclass:

/* While grabbing a hold to the slider handle */
.irs--shiny .irs-handle:active{
  cursor: grabbing;
}

The options available to the active pseudo-class are the same as for the normal slider handle.

Slider Handles with Range

Slider handles within ranges work the same as single slider handles except the class is either appended with .from or .to to the end. The options you have are consistent the same as with what you have within Slider Handle and anything not specific for the .from or .to slider will be inherited from the general .irs--shiny .irs-handle which will apply to both.

“From” Slider Handle

An example CSS entry for the “from” slider handle is below:

/* "From" slider handle in a range */
.irs--shiny .irs-handle.from{
  background-color: black;
}

Note

In order to target a single inputID, replace <inputID> with the input widgets inputID below:

/* "From" slider handle in a range for a specific <inputID> */
.shiny-input-container:has(#<inputID>) .irs-handle.from{
  ...
}

“To” Slider Handle

An example CSS entry for the “to” slider handle is below:

/* "To" slider handle in a range */
.irs--shiny .irs-handle.to{
  background-color: pink;
}

Note

In order to target a single inputID, replace <inputID> with the input widgets inputID below:

/* "To" slider handle in a range for a specific <inputID> */
.shiny-input-container:has(#<inputID>) .irs-handle.to{
  ...
}

“From” and “To” Slider Handle

An example CSS entry for controlling the “from” and “to” slider handles is below:

/* "From" and "To" slider handle in a range */
.irs--shiny .irs-handle.to,
.irs--shiny .irs-handle.from{
  background-color: orange;
}

Note

In order to target a single inputID, replace <inputID> with the input widgets inputID below:

/* "From" and "To" slider handle in a range for a specific <inputID> */
.shiny-input-container:has(#<inputID>) .irs-handle.from,
.shiny-input-container:has(#<inputID>) .irs-handle.to{
  ...
}

Slider Minimum

An example CSS entry for the slider minimum label is below:

/* Slider Minimum Value */
.irs--shiny .irs-min{
  height: 22px; 
  width: 22px;
  background-color: blue;
  color: white;
  font-family: sans-serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 100;
  border-color: green;
  border-radius: 10px;
  border-style: dashed;
  border-width: 5px;
  padding: 1px 2px 3px 4px;
  opacity: 70%;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  text-shadow: -3px -3px 2px tomato;
}

Note

In order to target a single inputID, replace <inputID> with the input widgets inputID below:

/* Slider Minimum Value for a specific inputID */
.shiny-input-container:has(#<inputID>) .irs-min{
  ...
}

Argument	Note
`height`	Height of the slider minimum box (reference)
`width`	Width of the slider minimum box (reference)
`background-color`	The background color for the text (reference)
`color`	The color of the text (reference)
`font-family`	The font used (reference)
`font-size`	The size of the font (reference)
`font-style`	Whether the font is `normal` or `italic` (reference)
`font-weight`	How thick or bold the font is (reference)
`border-color`	Color of the border (reference)
`border-radius`	How curved the radius of the corners of box are (reference)
`border-style`	Style of the border (reference)
`border-width`	Width of the border (reference)
`padding`	How much space to leave around the text(reference)
`opacity`	The opacity of the slider minimum box (reference)
`box-shadow`	The shadow of the slider minimum (reference)
`text-shadow`	The shadow of the text within the slider minimum (reference)

Slider Maximum

An example CSS entry for the slider maximum label is below:

/* Slider Maximum Value */
.irs--shiny .irs-max{
  height: 22px; 
  width: 22px;
  background-color: yellow;
  color: green;
  font-family: sans-serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 100;
  border-color: green;
  border-radius: 10px;
  border-style: dashed;
  border-width: 5px;
  padding: 1px 2px 3px 4px;
  opacity: 60%;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: -3px -3px 2px tomato;
}

Note

In order to target a single inputID, replace <inputID> with the input widgets inputID below:

/* Slider Maximum Value for a specific inputID */
.shiny-input-container:has(#<inputID>) .irs-max{
  ...
}

Argument	Note
`height`	Height of the slider maximum box (reference)
`width`	Width of the slider maximum box (reference)
`background-color`	The background color for the text (reference)
`color`	The color of the text (reference)
`font-family`	The font used (reference)
`font-size`	The size of the font (reference)
`font-style`	Whether the font is `normal` or `italic` (reference)
`font-weight`	How thick or bold the font is (reference)
`border-color`	Color of the border (reference)
`border-radius`	How curved the radius of the corners of box are (reference)
`border-style`	Style of the border (reference)
`border-width`	Width of the border (reference)
`padding`	How much space to leave around the text (reference)
`opacity`	Opacity of the slider maximum (reference)
`box-shadow`	The shadow of the slider maximum (reference)
`text-shadow`	The shadow of the text within the slider maximum (reference)

Slider Minimum and Maximum

Likely, we want want the slider’s minimum and maximum to be identical and this can be accomplished by separating .irs--shiny .irs-min and .irs--shiny .irs-max with a comma.

/* Slider Minimum and Maximum Value */
.irs--shiny .irs-min,
.irs--shiny .irs-max{
  height: 22px; 
  width: 22px;
  background-color: yellow;
  color: green;
  font-family: sans-serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 100;
  border-color: green;
  border-radius: 10px;
  border-style: dashed;
  border-width: 5px;
  padding: 1px 2px 3px 4px;
  opacity: 30%;
  box-shadow: 2px -2px 10px green;
  text-shadow: -3px -3px 2px rgba(0, 0, 0, 0.8);
}

Note

In order to target a single inputID, replace <inputID> with the input widgets inputID below:

/* Slider Minimum and Maximum Value for a specific <inputID> */
.shiny-input-container:has(#<inputID>) .irs-min,
.shiny-input-container:has(#<inputID>) .irs-max{
  ...
}

Argument	Note
`height`	Height of the slider minimum and maximum box (reference)
`width`	Width of the slider minimum and maximum box (reference)
`background-color`	The background color for the text (reference)
`color`	The color of the text (reference)
`font-family`	The font used (reference)
`font-size`	The size of the font (reference)
`font-style`	Whether the font is `normal` or `italic` (reference)
`font-weight`	How thick or bold the font is (reference)
`border-color`	Color of the border (reference)
`border-radius`	How curved the radius of the corners of box are (reference)
`border-style`	Style of the border (reference)
`border-width`	Width of the border (reference)
`padding`	How much space to leave around the text (reference)
`opacity`	Opacity of the slider minimum and maximum (reference)
`box-shadow`	The shadow of the slider minimum and maximum (reference)
`text-shadow`	The shadow of the text within the slider minimum and maximum (reference)

Value of Slider Handle

An example CSS entry for the value of the slider handle is below:

/* Value of slider handle */
.irs--shiny .irs-single{
  background-color: orange;
  color: rgb(0, 0, 0);
  font-family: sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 200;
  border-color: #E3E3E3;
  border-radius: 2px;
  border-style: dotted;
  border-width: 3px;
  padding: 4px 3px 2px 1px;
  opacity: 90%;
  box-shadow: -4px -4px 6px rgba(255,0, 255, 0.8);
  text-shadow: -3px -3px 2px black;
}

Note

In order to target a single inputID, replace <inputID> with the input widgets inputID below:

/* Value of slider handle for a specific <inputID> */
.shiny-input-container:has(#<inputID>) .irs-single{
  ...
}

Argument	Note
`background-color`	The background color for the text (reference)
`color`	The color of the text (reference)
`font-family`	The font used (reference)
`font-size`	The size of the font (reference)
`font-style`	Whether the font is `normal` or `italic` (reference)
`font-weight`	How thick or bold the font is (reference)
`border-color`	Color of the border (reference)
`border-radius`	How curved the radius of the corners of box are (reference)
`border-style`	Style of the border (reference)
`border-width`	Width of the border (reference)
`padding`	How much space to leave around the text (reference)
`opacity`	Opacity of the value box (reference)
`box-shadow`	The shadow of the value box (reference)
`text-shadow`	The shadow of the text within the value box (reference)

Value of Slider Handle with Range

The values of the slider handles within ranges work the same as the value of a single slider handle except the classes have different names. The options you have are consistent the same as with what you have within Value of Slider Handle.

Value of “From” Slider Handle

An example CSS entry for the value of the “from” slider handle is below:

/* Value of "From" slider handle in a range */
.irs--shiny .irs-from{
  background-color: blue;
}

Note

In order to target a single inputID, replace <inputID> with the input widgets inputID below:

/* Value of "From" slider handle in a range for a specific <inputID> */
.shiny-input-container:has(#<inputID>) .irs-from{
  ...
}

Value of “To” Slider Handle

An example CSS entry for the value of the “to” slider handle is below:

/* Value of "To" slider handle in a range */
.irs--shiny .irs-to{
  background-color: red;
}

Note

In order to target a single inputID, replace <inputID> with the input widgets inputID below:

/* Value of "To" slider handle in a range for a specific <inputID> */
.shiny-input-container:has(#<inputID>) .irs-to{
  ...
}

Value of “From” and “To” Slider Handle

There could be cases where you want both slider handle to be the same. You could make separate .irs--shiny .irs-from and .irs--shiny .irs-to CSS entries, or you can make a single one for both:

/* Values of "To" and "From" slider handle in a range */
.irs--shiny .irs-to,
.irs--shiny .irs-from{
  background-color: pink;
}

Note

In order to target a single inputID, replace <inputID> with the input widgets inputID below:

/* Values of "To" and "From" slider handle in a range for a specific <inputID> */
.shiny-input-container:has(#<inputID>) .irs-from,
.shiny-input-container:has(#<inputID>) .irs-to{
  ...
}

Slider Bar

An example CSS entry for the background bar is below:

/* Background bar */
.irs--shiny .irs-line{
  background: violet;
  border-color: red;
  border-radius: 1px;
  border-style: double;
  border-width: 2px;
  opacity: 70%;
  box-shadow: 4px -4px 6px rgba(0, 0, 255, 0.8);
}

Note

In order to target a single inputID, replace <inputID> with the input widgets inputID below:

/* Background bar for a specific <inputID> */
.shiny-input-container:has(#<inputID>) .irs-line{
  ...
}

Argument	Note
`background`	The color for the filled portion of the bar (reference)
`border-color`	Color of the border (reference)
`border-radius`	How curved the radius of the corners of box are (reference)
`border-style`	Style of the border (reference)
`border-width`	Width of the border (reference)
`opacity`	Opacity of the value box (reference)
`box-shadow`	The shadow of the value box (reference)

Filled Portion of the Bar

An example CSS entry for the filled portion of the bar is below:

/* Filled portion of the bar in the foreground */
.irs--shiny .irs-bar{
  background-color: orange;
  border-color: green;
  border-radius: 2px;
  border-style: dashed;
  border-width: 2px;
  opacity: 90%;
  box-shadow: 4px -4px 6px rgba(0, 255, 255, 0.8);
}

Note

In order to target a single inputID, replace <inputID> with the input widgets inputID below:

/* Filled portion of the bar in the foreground for a specific <inputID> */
.shiny-input-container:has(#<inputID>) .irs-bar{
  ...
}

Argument	Note
`background-color`	The color for the filled portion of the bar (reference)
`border-color`	Color of the border (reference)
`border-radius`	How curved the radius of the corners of box are (reference)
`border-style`	Style of the border (reference)
`border-width`	Width of the border (reference)
`opacity`	Opacity of the value box (reference)
`box-shadow`	The shadow of the value box (reference)

Text on the Tick Marks

Control across all of the text on tick marks

An example CSS entry for the value of the filled portion of the bar is below:

/* Text on the tick marks */
.irs--shiny .irs-grid-text{
  height: 30px; 
  width: 30px;
  background-color: green;
  color: white;
  font-family: sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 800;
  border-color: orange;
  border-radius: 5px;
  border-style: dotted;
  border-width: 3px;
  padding: 1px 2px 3px 4px;
  opacity: 80%;
  box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.6);
  text-shadow: -3px -3px 2px purple;
}

Note

In order to target a single inputID, replace <inputID> with the input widgets inputID below:

/* Text on the tick marks for a specific <inputID> */
.shiny-input-container:has(#<inputID>) .irs-grid-text{
  ...
}

Argument	Note
`height`	Height of the slider minimum box (reference)
`width`	Width of the slider minimum box (reference)
`background-color`	The background color for the text (reference)
`color`	The color of the text (reference)
`font-family`	The font used (reference)
`font-size`	The size of the font (reference)
`font-style`	Whether the font is `normal` or `italic` (reference)
`font-weight`	How thick or bold the font is (reference)
`border-color`	Color of the border (reference)
`border-radius`	How curved the radius of the corners of box are (reference)
`border-style`	Style of the border (reference)
`border-width`	Width of the border (reference)
`padding`	How much space to leave around the text(reference)
`opacity`	The opacity of the slider minimum box (reference)
`box-shadow`	The shadow of the slider minimum (reference)
`text-shadow`	The shadow of the text within the slider minimum (reference)

Control over specific text on the tick marks

If you would like to have finer control over the text on the tick mark and assign different CSS input for different text you can modify the CSS entry to be:

/* Text on the <insert_integer> tick marks */
.irs--shiny .irs-grid-text.js-grid-text-<insert_integer>{
  ...
}

In this above example, replace <insert_integer> with a zero-indexed integer associated with the text.

Note

In order to target a single inputID, replace <inputID> with the input widgets inputID below:

/* Text on the <insert_integer> tick marks for a specific <inputID> */
.shiny-input-container:has(#<inputID>) .irs-grid-text.js-grid-text-<insert_integer>{
  ...
}

For example, if you wanted the first text element to be different than the rest than you would use:

/* Text on the first tick marks */
.irs--shiny .irs-grid-text.js-grid-text-0{
  ...
}

And if you wanted to modify the fourth text element then you would use:

/* Text on the fourth tick marks */
.irs--shiny .irs-grid-text.js-grid-text-3{
  ...
}

Note

Remember the indexing is zero-indexed!

Major Tick Marks

An example CSS entry for the values of the major tick marks is below:

/* Major tick marks */
.irs--shiny .irs-grid-pol:not(.small){
  height: 15px; 
  width: 4px;
  background-color: green;
  border-color: pink;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  opacity: 80%;
}

Note

In order to target a single inputID, replace <inputID> with the input widgets inputID below:

/* Major tick marks for a specific <inputID> */
.shiny-input-container:has(#<inputID>) .irs-grid-pol:not(.small){
  ...
}

Argument	Note
`height`	Height of the major tick mark (reference)
`width`	Width of the major tick mark (reference)
`background-color`	The color for the major tick mark (reference)
`border-color`	Color of the border (reference)
`border-radius`	How curved the radius of the corners of tick mark are (reference)
`border-style`	Style of the border (reference)
`border-width`	Width of the border (reference)
`opacity`	Opacity of the major tick marks (reference)

Minor Tick Marks

An example CSS entry for the values of the major tick marks is below:

/* Minor tick marks */
.irs--shiny .irs-grid-pol.small{
  height: 10px; 
  width: 5px;
  background-color: blue;
  border-color: red;
  border-radius: 4px;
  border-style: dotted;
  border-width: 2px;
  opacity: 90%;
}

Note

In order to target a single inputID, replace <inputID> with the input widgets inputID below:

/* Minor tick marks for a specific <inputID> */
.shiny-input-container:has(#<inputID>) .irs-grid-pol.small{
  ...
}

Argument	Note
`height`	Height of the minor tick mark (reference)
`width`	Width of the minor tick mark (reference)
`background-color`	The color for the minor tick mark (reference)
`border-color`	Color of the border (reference)
`border-radius`	How curved the radius of the corners of tick mark are (reference)
`border-style`	Style of the border (reference)
`border-width`	Width of the border (reference)
`opacity`	Opacity of the minor tick marks (reference)

Back to Table of Contents

--- title: "sliderInput" author: "Will Gammerdinger" --- Below is a key for the many of the elements that can be altered within the `sliderInput()`: ![**Input slider key.** The bolded black text is the element you wish to style. The blue text is if you want to style *all* elements with the same style. The green text is if you want to *target a specific element* by their `inputID`. To do this, you would replace `<inputID>` with a input widget's `inputID`.](../img/sliderInput_CSS_key.png){width="1000px"} It gets slightly more complicated with a slider range within the `sliderInput()`: ![**Input slider key with range.** The bolded black text is the element you wish to style. The blue text is if you want to style *all* elements with the same style. The green text is if you want to *target a specific element* by their `inputID`. To do this, you would replace `<inputID>` with a input widget's `inputID`.](../img/sliderInput_range_CSS_key.png){width="1000px"} Jump to the following sections: - [Slider Label](#slider-label) - [Slider Handle](#slider-handle) - [Slider Handles with Range](#slider-handles-with-range) - [Slider Minimum](#slider-minimum) - [Slider Maximum](#slider-maximum) - [Slider Minimum and Maximum](#slider-minimum-and-maximum) - [Value of Slider Handle](#value-of-slider-handle) - [Value of Slider Handle with Range](#value-of-slider-handle-with-range) - [Slider Bar](#slider-bar) - [Filled Portion of the Bar](#filled-portion-of-the-bar) - [Text on the Tick Marks](#text-on-the-tick-marks) - [Major Tick Marks](#major-tick-marks) - [Minor Tick Marks](#minor-tick-marks) ## Slider Label An example CSS entry for the slider label is below: ```{r} #| label: label_example #| eval: false /* Slider Label */ .shiny-input-container:has(.js-range-slider) > label{ height: 100px; width: 200px; background-color: red; color: orange; font-family: Monospace; font-size: 20px; font-style: italic; font-weight: 100; border-color: green; border-radius: 10px; border-style: dashed; border-width: 5px; padding: 1px 2px 3px 4px; opacity: 50%; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); text-shadow: -3px -3px 2px tomato; } ``` :::{.callout-note} In order to target a single `inputID`, replace `<inputID>` with the input widgets `inputID` below: ```{r} #| label: specific_label #| eval: false /* Slider Label for a specific <inputID> */ #<inputID>-label{ ... } ``` ::: | Argument | Note | |----------|------| | `height` | Height of the slider label box ([reference](Aside_CSS_property_reference.qmd#height)) | | `width` | Width of the slider label box ([reference](Aside_CSS_property_reference.qmd#width)) | | `background-color` | The background color for the text space ([reference](Aside_CSS_property_reference.qmd#background-color)) | | `color` | The color of the text ([reference](Aside_CSS_property_reference.qmd#color)) | | `font-family` | The font used ([reference](Aside_CSS_property_reference.qmd#font-family)) | | `font-size` | The size of the font ([reference](Aside_CSS_property_reference.qmd#font-size)) | | `font-style` | Whether the font is `normal` or `italic` ([reference](Aside_CSS_property_reference.qmd#font-style)) | | `font-weight` | How thick or bold the font is ([reference](Aside_CSS_property_reference.qmd#font-weight)) | | `border-color` | Color of the border ([reference](Aside_CSS_property_reference.qmd#border-color)) | | `border-radius` | How curved the radius of the corners are ([reference](Aside_CSS_property_reference.qmd#border-radius)) | | `border-style` | Style of the border ([reference](Aside_CSS_property_reference.qmd#border-style)) | | `border-width` | Width of the border ([reference](Aside_CSS_property_reference.qmd#border-width)) | | `padding` | How much space to leave around the text([reference](Aside_CSS_property_reference.qmd#padding)) | | `opacity` | Opacity of the label ([reference](Aside_CSS_property_reference.qmd#opacity)) | | `box-shadow` | The shadow of the box outlining the text space ([reference](Aside_CSS_property_reference.qmd#box-shadow)) | | `text-shadow` | The shadow of the text within the text space ([reference](Aside_CSS_property_reference.qmd#text-shadow)) | ## Slider Handle An example CSS entry for the slider handle is below: ```{r} #| label: handle_example #| eval: false /* Slider Handle */ .irs--shiny .irs-handle{ height: 22px; width: 22px; background-color: pink; border-width: 2px; border-radius: 10px; border-style: solid; border-color: green; opacity: 70%; cursor: pointer; box-shadow: 4px 4px 8px purple; } ``` :::{.callout-note} In order to target a single `inputID`, replace `<inputID>` with the input widgets `inputID` below: ```{r} #| label: specific_handle #| eval: false /* Slider Handle for a specific <inputID> */ .shiny-input-container:has(#<inputID>) .irs-handle{ ... } ``` ::: | Argument | Note | |----------|------| | `height` | Height of the slider handle ([reference](Aside_CSS_property_reference.qmd#height)) | | `width` | Width of the slider handle ([reference](Aside_CSS_property_reference.qmd#width)) | | `background-color` | Color of the inner circle of the slider handle ([reference](Aside_CSS_property_reference.qmd#background-color))| | `border-width` | Width of the border ([reference](Aside_CSS_property_reference.qmd#border-width)) | | `border-radius` | How curved the radius of the slider handle is ([reference](Aside_CSS_property_reference.qmd#border-radius)) | | `border-style` | Style of the border ([reference](Aside_CSS_property_reference.qmd#border-style)) | | `border-color` | Color of the corder ([reference](Aside_CSS_property_reference.qmd#border-color)) | | `opacity` | Opacity of the slider handle ([reference](Aside_CSS_property_reference.qmd#opacity)) | | `cursor` | Image of cursor ([reference](Aside_CSS_property_reference.qmd#cursor)) | | `box-shadow` | The shadow of the slider handle ([reference](Aside_CSS_property_reference.qmd#box-shadow)) | ### Hover pseudo-class The default `sliderInput()` changes slight shades as you hover over it. If you would like to edit this behavior you will need to use the `:hover` pseudo-class: ```{r} #| label: hover_example #| eval: false /* While hovering over the slider handle*/ .irs--shiny .irs-handle:hover{ cursor: grab; } ``` The options available to the hover pseudo-class are the same as for the normal slider handle. ### Active pseudo-class You can also alter the the slider handle while you are dragging it by using the `:active` pseudoclass: ```{r} #| label: active_example #| eval: false /* While grabbing a hold to the slider handle */ .irs--shiny .irs-handle:active{ cursor: grabbing; } ``` The options available to the active pseudo-class are the same as for the normal slider handle. ## Slider Handles with Range Slider handles within ranges work the same as single slider handles except the class is either appended with `.from` or `.to` to the end. The options you have are consistent the same as with what you have within Slider Handle and anything not specific for the `.from` or `.to` slider will be inherited from the general `.irs--shiny .irs-handle` which will apply to both. ### "From" Slider Handle An example CSS entry for the "from" slider handle is below: ```{r} #| label: from_example #| eval: false /* "From" slider handle in a range */ .irs--shiny .irs-handle.from{ background-color: black; } ``` :::{.callout-note} In order to target a single `inputID`, replace `<inputID>` with the input widgets `inputID` below: ```{r} #| label: specific_from #| eval: false /* "From" slider handle in a range for a specific <inputID> */ .shiny-input-container:has(#<inputID>) .irs-handle.from{ ... } ``` ::: ### "To" Slider Handle An example CSS entry for the "to" slider handle is below: ```{r} #| label: to_example #| eval: false /* "To" slider handle in a range */ .irs--shiny .irs-handle.to{ background-color: pink; } ``` :::{.callout-note} In order to target a single `inputID`, replace `<inputID>` with the input widgets `inputID` below: ```{r} #| label: specific_to #| eval: false /* "To" slider handle in a range for a specific <inputID> */ .shiny-input-container:has(#<inputID>) .irs-handle.to{ ... } ``` ::: ### "From" and "To" Slider Handle An example CSS entry for controlling the "from" and "to" slider handles is below: ```{r} #| label: from_to_example #| eval: false /* "From" and "To" slider handle in a range */ .irs--shiny .irs-handle.to, .irs--shiny .irs-handle.from{ background-color: orange; } ``` :::{.callout-note} In order to target a single `inputID`, replace `<inputID>` with the input widgets `inputID` below: ```{r} #| label: specific_to_from #| eval: false /* "From" and "To" slider handle in a range for a specific <inputID> */ .shiny-input-container:has(#<inputID>) .irs-handle.from, .shiny-input-container:has(#<inputID>) .irs-handle.to{ ... } ``` ::: ## Slider Minimum An example CSS entry for the slider minimum label is below: ```{r} #| label: minimum_example #| eval: false /* Slider Minimum Value */ .irs--shiny .irs-min{ height: 22px; width: 22px; background-color: blue; color: white; font-family: sans-serif; font-size: 10px; font-style: italic; font-weight: 100; border-color: green; border-radius: 10px; border-style: dashed; border-width: 5px; padding: 1px 2px 3px 4px; opacity: 70%; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); text-shadow: -3px -3px 2px tomato; } ``` :::{.callout-note} In order to target a single `inputID`, replace `<inputID>` with the input widgets `inputID` below: ```{r} #| label: specific_minimum #| eval: false /* Slider Minimum Value for a specific inputID */ .shiny-input-container:has(#<inputID>) .irs-min{ ... } ``` ::: | Argument | Note | |----------|------| | `height` | Height of the slider minimum box ([reference](Aside_CSS_property_reference.qmd#height)) | | `width` | Width of the slider minimum box ([reference](Aside_CSS_property_reference.qmd#width)) | | `background-color` | The background color for the text ([reference](Aside_CSS_property_reference.qmd#background-color)) | | `color` | The color of the text ([reference](Aside_CSS_property_reference.qmd#color)) | | `font-family` | The font used ([reference](Aside_CSS_property_reference.qmd#font-family)) | | `font-size` | The size of the font ([reference](Aside_CSS_property_reference.qmd#font-size)) | | `font-style` | Whether the font is `normal` or `italic` ([reference](Aside_CSS_property_reference.qmd#font-style)) | | `font-weight` | How thick or bold the font is ([reference](Aside_CSS_property_reference.qmd#font-weight)) | | `border-color` | Color of the border ([reference](Aside_CSS_property_reference.qmd#border-color)) | | `border-radius` | How curved the radius of the corners of box are ([reference](Aside_CSS_property_reference.qmd#border-radius)) | | `border-style` | Style of the border ([reference](Aside_CSS_property_reference.qmd#border-style)) | | `border-width` | Width of the border ([reference](Aside_CSS_property_reference.qmd#border-width)) | | `padding` | How much space to leave around the text([reference](Aside_CSS_property_reference.qmd#padding)) | | `opacity` | The opacity of the slider minimum box ([reference](Aside_CSS_property_reference.qmd#opacity)) | | `box-shadow` | The shadow of the slider minimum ([reference](Aside_CSS_property_reference.qmd#box-shadow)) | | `text-shadow` | The shadow of the text within the slider minimum ([reference](Aside_CSS_property_reference.qmd#text-shadow)) | ## Slider Maximum An example CSS entry for the slider maximum label is below: ```{r} #| label: maximum_example #| eval: false /* Slider Maximum Value */ .irs--shiny .irs-max{ height: 22px; width: 22px; background-color: yellow; color: green; font-family: sans-serif; font-size: 10px; font-style: italic; font-weight: 100; border-color: green; border-radius: 10px; border-style: dashed; border-width: 5px; padding: 1px 2px 3px 4px; opacity: 60%; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2); text-shadow: -3px -3px 2px tomato; } ``` :::{.callout-note} In order to target a single `inputID`, replace `<inputID>` with the input widgets `inputID` below: ```{r} #| label: specific_maximum #| eval: false /* Slider Maximum Value for a specific inputID */ .shiny-input-container:has(#<inputID>) .irs-max{ ... } ``` ::: | Argument | Note | |----------|------| | `height` | Height of the slider maximum box ([reference](Aside_CSS_property_reference.qmd#height)) | | `width` | Width of the slider maximum box ([reference](Aside_CSS_property_reference.qmd#width)) | | `background-color` | The background color for the text ([reference](Aside_CSS_property_reference.qmd#background-color)) | | `color` | The color of the text ([reference](Aside_CSS_property_reference.qmd#color)) | | `font-family` | The font used ([reference](Aside_CSS_property_reference.qmd#font-family)) | | `font-size` | The size of the font ([reference](Aside_CSS_property_reference.qmd#font-size)) | | `font-style` | Whether the font is `normal` or `italic` ([reference](Aside_CSS_property_reference.qmd#font-style)) | | `font-weight` | How thick or bold the font is ([reference](Aside_CSS_property_reference.qmd#font-weight)) | | `border-color` | Color of the border ([reference](Aside_CSS_property_reference.qmd#border-color)) | | `border-radius` | How curved the radius of the corners of box are ([reference](Aside_CSS_property_reference.qmd#border-radius)) | | `border-style` | Style of the border ([reference](Aside_CSS_property_reference.qmd#border-style)) | | `border-width` | Width of the border ([reference](Aside_CSS_property_reference.qmd#border-width)) | | `padding` | How much space to leave around the text ([reference](Aside_CSS_property_reference.qmd#padding)) | | `opacity` | Opacity of the slider maximum ([reference](Aside_CSS_property_reference.qmd#opacity)) | | `box-shadow` | The shadow of the slider maximum ([reference](Aside_CSS_property_reference.qmd#box-shadow)) | | `text-shadow` | The shadow of the text within the slider maximum ([reference](Aside_CSS_property_reference.qmd#text-shadow)) | ## Slider Minimum and Maximum Likely, we want want the slider's minimum and maximum to be identical and this can be accomplished by separating `.irs--shiny .irs-min` and `.irs--shiny .irs-max` with a comma. ```{r} #| label: minimum_maximum_example #| eval: false /* Slider Minimum and Maximum Value */ .irs--shiny .irs-min, .irs--shiny .irs-max{ height: 22px; width: 22px; background-color: yellow; color: green; font-family: sans-serif; font-size: 10px; font-style: italic; font-weight: 100; border-color: green; border-radius: 10px; border-style: dashed; border-width: 5px; padding: 1px 2px 3px 4px; opacity: 30%; box-shadow: 2px -2px 10px green; text-shadow: -3px -3px 2px rgba(0, 0, 0, 0.8); } ``` :::{.callout-note} In order to target a single `inputID`, replace `<inputID>` with the input widgets `inputID` below: ```{r} #| label: specific_minimum_maximum #| eval: false /* Slider Minimum and Maximum Value for a specific <inputID> */ .shiny-input-container:has(#<inputID>) .irs-min, .shiny-input-container:has(#<inputID>) .irs-max{ ... } ``` ::: | Argument | Note | |----------|------| | `height` | Height of the slider minimum and maximum box ([reference](Aside_CSS_property_reference.qmd#height)) | | `width` | Width of the slider minimum and maximum box ([reference](Aside_CSS_property_reference.qmd#width)) | | `background-color` | The background color for the text ([reference](Aside_CSS_property_reference.qmd#background-color)) | | `color` | The color of the text ([reference](Aside_CSS_property_reference.qmd#color)) | | `font-family` | The font used ([reference](Aside_CSS_property_reference.qmd#font-family)) | | `font-size` | The size of the font ([reference](Aside_CSS_property_reference.qmd#font-size)) | | `font-style` | Whether the font is `normal` or `italic` ([reference](Aside_CSS_property_reference.qmd#font-style)) | | `font-weight` | How thick or bold the font is ([reference](Aside_CSS_property_reference.qmd#font-weight)) | | `border-color` | Color of the border ([reference](Aside_CSS_property_reference.qmd#border-color)) | | `border-radius` | How curved the radius of the corners of box are ([reference](Aside_CSS_property_reference.qmd#border-radius)) | | `border-style` | Style of the border ([reference](Aside_CSS_property_reference.qmd#border-style)) | | `border-width` | Width of the border ([reference](Aside_CSS_property_reference.qmd#border-width)) | | `padding` | How much space to leave around the text ([reference](Aside_CSS_property_reference.qmd#padding)) | | `opacity` | Opacity of the slider minimum and maximum ([reference](Aside_CSS_property_reference.qmd#opacity)) | | `box-shadow` | The shadow of the slider minimum and maximum ([reference](Aside_CSS_property_reference.qmd#box-shadow)) | | `text-shadow` | The shadow of the text within the slider minimum and maximum ([reference](Aside_CSS_property_reference.qmd#text-shadow)) | ## Value of Slider Handle An example CSS entry for the value of the slider handle is below: ```{r} #| label: value_handle_example #| eval: false /* Value of slider handle */ .irs--shiny .irs-single{ background-color: orange; color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-style: normal; font-weight: 200; border-color: #E3E3E3; border-radius: 2px; border-style: dotted; border-width: 3px; padding: 4px 3px 2px 1px; opacity: 90%; box-shadow: -4px -4px 6px rgba(255,0, 255, 0.8); text-shadow: -3px -3px 2px black; } ``` :::{.callout-note} In order to target a single `inputID`, replace `<inputID>` with the input widgets `inputID` below: ```{r} #| label: specific_value_handle #| eval: false /* Value of slider handle for a specific <inputID> */ .shiny-input-container:has(#<inputID>) .irs-single{ ... } ``` ::: | Argument | Note | |----------|------| | `background-color` | The background color for the text ([reference](Aside_CSS_property_reference.qmd#background-color)) | | `color` | The color of the text ([reference](Aside_CSS_property_reference.qmd#color)) | | `font-family` | The font used ([reference](Aside_CSS_property_reference.qmd#font-family)) | | `font-size` | The size of the font ([reference](Aside_CSS_property_reference.qmd#font-size)) | | `font-style` | Whether the font is `normal` or `italic` ([reference](Aside_CSS_property_reference.qmd#font-style)) | | `font-weight` | How thick or bold the font is ([reference](Aside_CSS_property_reference.qmd#font-weight)) | | `border-color` | Color of the border ([reference](Aside_CSS_property_reference.qmd#border-color)) | | `border-radius` | How curved the radius of the corners of box are ([reference](Aside_CSS_property_reference.qmd#border-radius)) | | `border-style` | Style of the border ([reference](Aside_CSS_property_reference.qmd#border-style)) | | `border-width` | Width of the border ([reference](Aside_CSS_property_reference.qmd#border-width)) | | `padding` | How much space to leave around the text ([reference](Aside_CSS_property_reference.qmd#padding)) | | `opacity` | Opacity of the value box ([reference](Aside_CSS_property_reference.qmd#opacity)) | | `box-shadow` | The shadow of the value box ([reference](Aside_CSS_property_reference.qmd#box-shadow)) | | `text-shadow` | The shadow of the text within the value box ([reference](Aside_CSS_property_reference.qmd#text-shadow)) | ## Value of Slider Handle with Range The values of the slider handles within ranges work the same as the value of a single slider handle except the classes have different names. The options you have are consistent the same as with what you have within Value of Slider Handle. ### Value of "From" Slider Handle An example CSS entry for the value of the "from" slider handle is below: ```{r} #| label: from_value_example #| eval: false /* Value of "From" slider handle in a range */ .irs--shiny .irs-from{ background-color: blue; } ``` :::{.callout-note} In order to target a single `inputID`, replace `<inputID>` with the input widgets `inputID` below: ```{r} #| label: specific_from_value #| eval: false /* Value of "From" slider handle in a range for a specific <inputID> */ .shiny-input-container:has(#<inputID>) .irs-from{ ... } ``` ::: ### Value of "To" Slider Handle An example CSS entry for the value of the "to" slider handle is below: ```{r} #| label: to_value_example #| eval: false /* Value of "To" slider handle in a range */ .irs--shiny .irs-to{ background-color: red; } ``` :::{.callout-note} In order to target a single `inputID`, replace `<inputID>` with the input widgets `inputID` below: ```{r} #| label: specific_to_value #| eval: false /* Value of "To" slider handle in a range for a specific <inputID> */ .shiny-input-container:has(#<inputID>) .irs-to{ ... } ``` ::: ### Value of "From" and "To" Slider Handle There could be cases where you want both slider handle to be the same. You could make separate `.irs--shiny .irs-from` and `.irs--shiny .irs-to` CSS entries, or you can make a single one for both: ```{r} #| label: from_to_value_example #| eval: false /* Values of "To" and "From" slider handle in a range */ .irs--shiny .irs-to, .irs--shiny .irs-from{ background-color: pink; } ``` :::{.callout-note} In order to target a single `inputID`, replace `<inputID>` with the input widgets `inputID` below: ```{r} #| label: specific_from_to_value #| eval: false /* Values of "To" and "From" slider handle in a range for a specific <inputID> */ .shiny-input-container:has(#<inputID>) .irs-from, .shiny-input-container:has(#<inputID>) .irs-to{ ... } ``` ::: ## Slider Bar An example CSS entry for the background bar is below: ```{r} #| label: line_example #| eval: false /* Background bar */ .irs--shiny .irs-line{ background: violet; border-color: red; border-radius: 1px; border-style: double; border-width: 2px; opacity: 70%; box-shadow: 4px -4px 6px rgba(0, 0, 255, 0.8); } ``` :::{.callout-note} In order to target a single `inputID`, replace `<inputID>` with the input widgets `inputID` below: ```{r} #| label: specific_line #| eval: false /* Background bar for a specific <inputID> */ .shiny-input-container:has(#<inputID>) .irs-line{ ... } ``` ::: | Argument | Note | |----------|------| | `background` | The color for the filled portion of the bar ([reference](Aside_CSS_property_reference.qmd#background)) | | `border-color` | Color of the border ([reference](Aside_CSS_property_reference.qmd#border-color)) | | `border-radius` | How curved the radius of the corners of box are ([reference](Aside_CSS_property_reference.qmd#border-radius)) | | `border-style` | Style of the border ([reference](Aside_CSS_property_reference.qmd#border-style)) | | `border-width` | Width of the border ([reference](Aside_CSS_property_reference.qmd#border-width)) | | `opacity` | Opacity of the value box ([reference](Aside_CSS_property_reference.qmd#opacity)) | | `box-shadow` | The shadow of the value box ([reference](Aside_CSS_property_reference.qmd#box-shadow)) | ## Filled Portion of the Bar An example CSS entry for the filled portion of the bar is below: ```{r} #| label: bar_example #| eval: false /* Filled portion of the bar in the foreground */ .irs--shiny .irs-bar{ background-color: orange; border-color: green; border-radius: 2px; border-style: dashed; border-width: 2px; opacity: 90%; box-shadow: 4px -4px 6px rgba(0, 255, 255, 0.8); } ``` :::{.callout-note} In order to target a single `inputID`, replace `<inputID>` with the input widgets `inputID` below: ```{r} #| label: specific_bar #| eval: false /* Filled portion of the bar in the foreground for a specific <inputID> */ .shiny-input-container:has(#<inputID>) .irs-bar{ ... } ``` ::: | Argument | Note | |----------|------| | `background-color` | The color for the filled portion of the bar ([reference](Aside_CSS_property_reference.qmd#background-color)) | | `border-color` | Color of the border ([reference](Aside_CSS_property_reference.qmd#border-color)) | | `border-radius` | How curved the radius of the corners of box are ([reference](Aside_CSS_property_reference.qmd#border-radius)) | | `border-style` | Style of the border ([reference](Aside_CSS_property_reference.qmd#border-style)) | | `border-width` | Width of the border ([reference](Aside_CSS_property_reference.qmd#border-width)) | | `opacity` | Opacity of the value box ([reference](Aside_CSS_property_reference.qmd#opacity)) | | `box-shadow` | The shadow of the value box ([reference](Aside_CSS_property_reference.qmd#box-shadow)) | ## Text on the Tick Marks ### Control across all of the text on tick marks An example CSS entry for the value of the filled portion of the bar is below: ```{r} #| label: text_all_tickmarks_example #| eval: false /* Text on the tick marks */ .irs--shiny .irs-grid-text{ height: 30px; width: 30px; background-color: green; color: white; font-family: sans-serif; font-size: 12px; font-style: italic; font-weight: 800; border-color: orange; border-radius: 5px; border-style: dotted; border-width: 3px; padding: 1px 2px 3px 4px; opacity: 80%; box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.6); text-shadow: -3px -3px 2px purple; } ``` :::{.callout-note} In order to target a single `inputID`, replace `<inputID>` with the input widgets `inputID` below: ```{r} #| label: specific_all_tickmark #| eval: false /* Text on the tick marks for a specific <inputID> */ .shiny-input-container:has(#<inputID>) .irs-grid-text{ ... } ``` ::: | Argument | Note | |----------|------| | `height` | Height of the slider minimum box ([reference](Aside_CSS_property_reference.qmd#height)) | | `width` | Width of the slider minimum box ([reference](Aside_CSS_property_reference.qmd#width)) | | `background-color` | The background color for the text ([reference](Aside_CSS_property_reference.qmd#background-color)) | | `color` | The color of the text ([reference](Aside_CSS_property_reference.qmd#color)) | | `font-family` | The font used ([reference](Aside_CSS_property_reference.qmd#font-family)) | | `font-size` | The size of the font ([reference](Aside_CSS_property_reference.qmd#font-size)) | | `font-style` | Whether the font is `normal` or `italic` ([reference](Aside_CSS_property_reference.qmd#font-style)) | | `font-weight` | How thick or bold the font is ([reference](Aside_CSS_property_reference.qmd#font-weight)) | | `border-color` | Color of the border ([reference](Aside_CSS_property_reference.qmd#border-color)) | | `border-radius` | How curved the radius of the corners of box are ([reference](Aside_CSS_property_reference.qmd#border-radius)) | | `border-style` | Style of the border ([reference](Aside_CSS_property_reference.qmd#border-style)) | | `border-width` | Width of the border ([reference](Aside_CSS_property_reference.qmd#border-width)) | | `padding` | How much space to leave around the text([reference](Aside_CSS_property_reference.qmd#padding)) | | `opacity` | The opacity of the slider minimum box ([reference](Aside_CSS_property_reference.qmd#opacity)) | | `box-shadow` | The shadow of the slider minimum ([reference](Aside_CSS_property_reference.qmd#box-shadow)) | | `text-shadow` | The shadow of the text within the slider minimum ([reference](Aside_CSS_property_reference.qmd#text-shadow)) | ### Control over specific text on the tick marks If you would like to have finer control over the text on the tick mark and assign different CSS input for different text you can modify the CSS entry to be: ```{r} #| label: indexed_text_tickmarks_example #| eval: false /* Text on the <insert_integer> tick marks */ .irs--shiny .irs-grid-text.js-grid-text-<insert_integer>{ ... } ``` In this above example, replace `<insert_integer>` with a zero-indexed integer associated with the text. :::{.callout-note} In order to target a single `inputID`, replace `<inputID>` with the input widgets `inputID` below: ```{r} #| label: specific_indexed_text_tickmarks #| eval: false /* Text on the <insert_integer> tick marks for a specific <inputID> */ .shiny-input-container:has(#<inputID>) .irs-grid-text.js-grid-text-<insert_integer>{ ... } ``` ::: For example, if you wanted the first text element to be different than the rest than you would use: ```{r} #| label: text_first_tickmark_example #| eval: false /* Text on the first tick marks */ .irs--shiny .irs-grid-text.js-grid-text-0{ ... } ``` And if you wanted to modify the fourth text element then you would use: ```{r} #| label: text_fourth_tickmark_example #| eval: false /* Text on the fourth tick marks */ .irs--shiny .irs-grid-text.js-grid-text-3{ ... } ``` :::{.callout-note} Remember the indexing is zero-indexed! ::: ## Major Tick Marks An example CSS entry for the values of the major tick marks is below: ```{r} #| label: major_tickmark_example #| eval: false /* Major tick marks */ .irs--shiny .irs-grid-pol:not(.small){ height: 15px; width: 4px; background-color: green; border-color: pink; border-radius: 3px; border-style: solid; border-width: 1px; opacity: 80%; } ``` :::{.callout-note} In order to target a single `inputID`, replace `<inputID>` with the input widgets `inputID` below: ```{r} #| label: specific_major_tickmark #| eval: false /* Major tick marks for a specific <inputID> */ .shiny-input-container:has(#<inputID>) .irs-grid-pol:not(.small){ ... } ``` ::: | Argument | Note | |----------|------| | `height` | Height of the major tick mark ([reference](Aside_CSS_property_reference.qmd#height)) | | `width` | Width of the major tick mark ([reference](Aside_CSS_property_reference.qmd#width)) | | `background-color` | The color for the major tick mark ([reference](Aside_CSS_property_reference.qmd#background-color)) | | `border-color` | Color of the border ([reference](Aside_CSS_property_reference.qmd#border-color)) | | `border-radius` | How curved the radius of the corners of tick mark are ([reference](Aside_CSS_property_reference.qmd#border-radius)) | | `border-style` | Style of the border ([reference](Aside_CSS_property_reference.qmd#border-style)) | | `border-width` | Width of the border ([reference](Aside_CSS_property_reference.qmd#border-width)) | | `opacity` | Opacity of the major tick marks ([reference](Aside_CSS_property_reference.qmd#opacity)) | ## Minor Tick Marks An example CSS entry for the values of the major tick marks is below: ```{r} #| label: minor_tickmark_example #| eval: false /* Minor tick marks */ .irs--shiny .irs-grid-pol.small{ height: 10px; width: 5px; background-color: blue; border-color: red; border-radius: 4px; border-style: dotted; border-width: 2px; opacity: 90%; } ``` :::{.callout-note} In order to target a single `inputID`, replace `<inputID>` with the input widgets `inputID` below: ```{r} #| label: specific_minor_tickmarks #| eval: false /* Minor tick marks for a specific <inputID> */ .shiny-input-container:has(#<inputID>) .irs-grid-pol.small{ ... } ``` ::: | Argument | Note | |----------|------| | `height` | Height of the minor tick mark ([reference](Aside_CSS_property_reference.qmd#height)) | | `width` | Width of the minor tick mark ([reference](Aside_CSS_property_reference.qmd#width)) | | `background-color` | The color for the minor tick mark ([reference](Aside_CSS_property_reference.qmd#background-color)) | | `border-color` | Color of the border ([reference](Aside_CSS_property_reference.qmd#border-color)) | | `border-radius` | How curved the radius of the corners of tick mark are ([reference](Aside_CSS_property_reference.qmd#border-radius)) | | `border-style` | Style of the border ([reference](Aside_CSS_property_reference.qmd#border-style)) | | `border-width` | Width of the border ([reference](Aside_CSS_property_reference.qmd#border-width)) | | `opacity` | Opacity of the minor tick marks ([reference](Aside_CSS_property_reference.qmd#opacity)) | --- [Back to Table of Contents](Aside_CSS.qmd#CSS-Element-Reference)