# Disable Opacity and Stroke Sliders for Specific Annotation Types (Rectangle & Highlight) in Tool Style Popup

**URL:** <https://pdfjs.community/t/disable-opacity-and-stroke-sliders-for-specific-annotation-types-rectangle-highlight-in-tool-style-popup/3549>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [December 12, 2024, 8:18am UTC](https://pdfjs.community/t/disable-opacity-and-stroke-sliders-for-specific-annotation-types-rectangle-highlight-in-tool-style-popup/3549 "2024-12-12T08:18:36Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ashokkumar.kunchala](https://avatars.discourse-cdn.com/v4/letter/a/d07c76/32.png) [@ashokkumar.kunchala](https://pdfjs.community/u/ashokkumar.kunchala)\
**Post date:** [December 12, 2024, 8:18am UTC](https://pdfjs.community/t/disable-opacity-and-stroke-sliders-for-specific-annotation-types-rectangle-highlight-in-tool-style-popup/3549/1 "2024-12-12T08:18:36Z")

</div>

### Which product are you using?

PDF.js Express PLUS

### PDF.js Express Version

- **UI version** : 8.7.0
- **Core version** : 8.7.2
- **webviewer.min.js** : 8.7.2

### Detailed Description of Issue

I want to disable the opacity and stroke sliders in the tool style popup **only for Rectangle and Highlight annotations**.

I tried using `viewer.UI.disableElements(['opacitySlider', 'strokeStyleSlider']);`, but it disables the sliders for all annotation types, including other tools like Ellipse, Line, and Arrow.

Additionally, I attempted to use the `annotationChanged` event to dynamically disable the sliders based on the selected annotation type. While the event is firing, the sliders are not disabled specifically for `RectangleAnnotation` and `HighlightAnnotation` as intended.

Furthermore, the `openPopup` event does not trigger when the tool style popup opens, making it challenging to handle this case.

### Expected Behaviour

The opacity and stroke sliders should be disabled **only** for `RectangleAnnotation` and `HighlightAnnotation`. Other annotation types should retain full functionality in the style popup.

**Example Expected Behavior:**

- Rectangle: Opacity and Stroke sliders are hidden.
- Highlight: Opacity and Stroke sliders are hidden.
- Ellipse, Line, Arrow, etc.: Sliders remain visible.

### Does your issue happen with every document, or just one?

The issue happens with every document.

### Link to Document

{Provide a link to the document in question, if possible}

### Code Snippet

Please let me know if there’s an alternative event or approach that works for handling this use case.

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [December 12, 2024, 9:04pm UTC](https://pdfjs.community/t/disable-opacity-and-stroke-sliders-for-specific-annotation-types-rectangle-highlight-in-tool-style-popup/3549/3 "2024-12-12T21:04:14Z")

</div>

Hi there,

You can use the toolModeUpdated event to disable/enable those elements.  
i.e.

```javascript
documentViewer.addEventListener('toolModeUpdated', (newTool, oldTool) => {
    console.log(newTool.name);
    if (newTool.name === 'AnnotationCreateRectangle' || newTool.name === 'AnnotationCreateTextHighlight') {
        console.log('disabling sliders');
        UI.disableElements(['opacitySlider', 'strokeStyleSlider'])
    } else {
        console.log('enabling sliders');
        UI.enableElements(['opacitySlider', 'strokeStyleSlider'])
    }
})

```

Here’s the toolNames list for reference:  
[https://pdfjs.express/api/Core.Tools.html#.ToolNames](https://pdfjs.express/api/Core.Tools.html#.ToolNames)

Best regards,  
Kevin