Update app.py

app.py

@@ -74,6 +74,7 @@ with gr.Blocks() as interface:
             #process-button { width: 100%; margin-top: 10px; background-color: #6a4cfc; color: white; border: none; border-radius: 5px; }
             #mp3-download, #iphone-ringtone { width: 45%; }
             #instructions { width: 100%; margin-top: 20px; }
+            #start-time-slider, #end-time-slider { width: 45%; }
         </style>
     """)
 
@@ -84,10 +85,10 @@ with gr.Blocks() as interface:
     gr.HTML("<h3 style='text-align: center;'>Trim Audio</h3>")
 
     with gr.Row():
-        start_time = gr.Slider(0, 20, value=0, label="Start Time (seconds)", style={"width": "45%"})
-        end_time = gr.Slider(1, 20, value=20, label="End Time (seconds)", style={"width": "45%"})
+        start_time = gr.Slider(0, 20, value=0, label="Start Time (seconds)", elem_id="start-time-slider")
+        end_time = gr.Slider(1, 20, value=20, label="End Time (seconds)", elem_id="end-time-slider")
     
-  
+    # Add a class for custom button color
     process_button = gr.Button("Create Ringtones", elem_id="process-button")
     
     with gr.Row():
@@ -107,5 +108,3 @@ with gr.Blocks() as interface:
 interface.launch(share=True)
 
 
-
-