Is it possible to assign different colors to the two buttons of a range slider in Shiny?

In Shiny, the ion-rangeslider is utilized from this source. By tweaking the code, I managed to change the color and some properties of the slider. The snippet below creates a standard slider with a green button and a range slider with red buttons.

Now, my aim is to give each button on the range slider its own unique color. For example, I'd like them to be red and blue instead of all being red. Is there a way to achieve this?


https://i.sstatic.net/cfgV5.png


library(shiny)

ui <- fluidPage(
  sliderInput("test1",
              "Select a value:",
              min = 0,
              max = 50,
              value = 20),
  sliderInput("test2",
              "Select a range:",
              min = 0,
              max = 50,
              value = c(30, 40)),
  tags$style(type = "text/css",
             HTML(".js-irs-0 .irs-slider { width: 8px; height: 20px; top: 20px; background: green }",
                  ".js-irs-1 .irs-slider { width: 8px; height: 20px; top: 20px; background: red }"))
)

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

Answer №1

It appears that you were quite close, just make some adjustments to the css and include a .from or .to class:

  # ...
  tags$style(type = "text/css",
             HTML(".irs-slider { width: 8px; height: 20px; top: 20px; background: green; }",
                  ".irs-slider.from { width: 8px; height: 20px; top: 20px; background: red; }",
                  ".irs-slider.to { width: 8px; height: 20px; top: 20px; background: orange; }"))

https://i.sstatic.net/4bJDR.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubles with concealing dropdown menu when hovering

I have noticed that this issue has been raised before, but none of the solutions provided seem to fix my problem specifically. The submenu in my menu is not functioning as intended. It should be displayed when hovered over and hidden when not being hovere ...

Eliminate the white background from the modal image

I'm facing an issue with an image displayed in a modal. The image has a white background that I want to remove so only the image itself is visible. https://i.stack.imgur.com/CG9Ne.png Here's the code snippet: <div id="myModal" class ...

Creating a Customized Pop-up Box with Bootstrap CSS and JQuery/Java Integration

I have a filter box that appears when the filter icon is clicked, but it currently lacks Bootstrap styling. I am in the process of upgrading the website to Bootstrap3 HTML5. The current appearance of the filter icon is as follows: However, we want it to ...

Remember to consider the dimensions of aesthetics when using the ggplot filter

Seeking to apply filters to my dataset before plotting with ggplot2. When I visualized the entire dataset using this command, everything was as expected: x_in %>%; ggplot(aes(x = x_in$`Turbine Wind Speed Adjusted m/s (m/s)`, y = x_in ...

Automatically change div background image based on window resizing

.step-1-4 { background:url('../images/gadget-4-sprite.png') no-repeat; width:950px; height:70px; margin-left: 15px; } The code above sets the CSS for a div containing a background image. The dimensions of the div match that of the imag ...

Retrieve the initial n lines from a csv file using R

Trying to figure out the best method to extract just the header of a csv file in R. I was thinking about using: read.csv(readLines("file.csv", n=3)) However, the output of readLines is not a valid connection. I considered utilizing stdin, but couldn&apo ...

Generate a ggplot bar chart featuring an eye-catching display of uniquely colored horizontal rectangles serving as the backdrop

Creating a unique bar plot with four bars in this design – where the background displays 4 different colored horizontal areas representing varying levels of strength: "low", "medium", "high", or "very high". # Incorporating ggplot2 library library(ggplot ...

Difficulty using Container, Row, and Col components in React-Bootstrap

Currently, I am diving into the world of React and React-Bootstrap to expand my skill set. My focus is on utilizing the React-Bootstrap grid layout effectively. However, I suspect that I might be doing something wrong in my implementation. It seems like t ...

How to build a login page with a static header and footer using Angular2

For my latest project, I am currently in the process of developing an application using Angular2 and eclipse Neon. Utilizing angular-cli for this app, I am now focused on creating the login page. Within the app.component.html file, you will find the follow ...

centering the text within the div for perfect alignment

I've been attempting to customize a Register form. My goal is to position the heading in the center of the div while having another login form located right beside it. Using flexbox, I styled them and then applied justify-content as center. Additiona ...

Close button for colorbox modal window containing an iframe

I'm currently utilizing colorbox for a modal popup, and the content of the popup is being sourced from a URL. Since it's displayed within an iFrame, I'm wondering how I can incorporate a close button to the modal popup. Thank you The follo ...

Stop hyperlinks from automatically opening in a new tab or window

I'm having trouble with my website links opening in new tabs. Even after changing the attributes to _self, it still doesn't work. Can someone please review my code below and provide a solution? Feel free to ask for more clarification if needed. ...

Styling Images Inside a DIV Container Using CSS Float

Considering that I have 2 divs with images and text, I encountered some formatting issues when attempting to float the image to the left using float:left;. The strange formatting is ruining the layout. Below, I've included my code snippet along with a ...

"click on the delete button and then hit the addButton

I have created a website where users can save and delete work hours. I am facing an issue where I can save the hours at the beginning, but once I delete them, I cannot save anything anymore. Additionally, when I reload the page, the deleted data reappears. ...

Exploring the Potential of CSS Styling within Vue.js

I am in the process of creating a website and I am looking for a way to manage my styles through Vue. I want to be able to utilize CSS with Vue, as the style of .skill-bar serves as the background of the bar, while .skill-bar-fill represents the green fil ...

What is the reason for the malfunctioning of this button upon clicking?

Attempting to customize my personal website by making the sidebar width change when the sidebar button is clicked. I'm puzzled as to why it's not working as intended. I prefer to figure it out independently but any helpful tips would be appreciat ...

How to position an empty Div next to images

I am currently working on a project to familiarize myself with Japanese Hiagana. I plan to incorporate more images and eventually sound into the post. To reduce the number of images used, I attempted to replace empty .pngs with a div element. However, I am ...

Show a table containing dynamic information, featuring 10 rows for each column. The header should be present for each additional column that is added

I have incoming dynamic data that I need to display in columns, with 10 records in each row. Currently, I am able to display 10 rows as expected. However, I want the header to repeat each time an additional column is added. How can I achieve this using the ...

Always ensure that three tables are prominently displayed in the center of the webpage's layout

I have been experimenting with CSS to keep an image consistently centered on a webpage. Now, I am looking to add 6 links on each side of the image while still keeping everything aligned in the middle as the page size changes. I'm debating whether I s ...

Adjusting the transparency of one element and rotating another element that are the same size

This issue is driving me nuts: I'm attempting to rotate the border of a circle element and simultaneously adjust the opacity of the circle overlay when a user hovers over it. However, in my current setup, only the opacity changes: <div id="main-c ...