diff --git a/.betterer.results b/.betterer.results
index 40a253a0e39..07281917d1d 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -41,9 +41,6 @@ exports[`no enzyme tests`] = {
     "packages/grafana-ui/src/components/QueryField/QueryField.test.tsx:375894800": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
-    "packages/grafana-ui/src/components/Slider/Slider.test.tsx:751112695": [
-      [0, 17, 13, "RegExp match", "2409514259"]
-    ],
     "packages/grafana-ui/src/components/Typeahead/PartialHighlighter.test.tsx:1751923376": [
       [0, 31, 13, "RegExp match", "2409514259"]
     ],
diff --git a/packages/grafana-ui/src/components/Slider/Slider.test.tsx b/packages/grafana-ui/src/components/Slider/Slider.test.tsx
index a3f3e30d4d0..8fd6e559c84 100644
--- a/packages/grafana-ui/src/components/Slider/Slider.test.tsx
+++ b/packages/grafana-ui/src/components/Slider/Slider.test.tsx
@@ -1,4 +1,6 @@
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { UserEvent } from '@testing-library/user-event/dist/types/setup';
 import React from 'react';
 
 import { Slider } from './Slider';
@@ -10,46 +12,79 @@ const sliderProps: SliderProps = {
 };
 
 describe('Slider', () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
   it('renders without error', () => {
-    mount(<Slider {...sliderProps} />);
+    expect(() => render(<Slider {...sliderProps} />)).not.toThrow();
   });
 
   it('renders correct contents', () => {
-    const wrapper = mount(<Slider {...sliderProps} />);
-    expect(wrapper.html()).toContain('aria-valuemin="10"');
-    expect(wrapper.html()).toContain('aria-valuemax="20"');
-    expect(wrapper.html()).toContain('aria-valuenow="10"');
+    render(<Slider {...sliderProps} />);
+
+    const slider = screen.getByRole('slider');
+    const sliderInput = screen.getByRole('textbox');
+
+    expect(slider).toHaveAttribute('aria-valuemin', '10');
+    expect(slider).toHaveAttribute('aria-valuemax', '20');
+    expect(slider).toHaveAttribute('aria-valuenow', '10');
+    expect(sliderInput).toHaveValue('10');
   });
 
   it('renders correct contents with a value', () => {
-    const wrapper = mount(<Slider {...sliderProps} value={15} />);
-    expect(wrapper.html()).toContain('aria-valuenow="15"');
-    expect(wrapper.html()).not.toContain('aria-valuenow="20"');
-    expect(wrapper.html()).not.toContain('aria-valuenow="10"');
+    render(<Slider {...sliderProps} value={15} />);
+
+    const slider = screen.getByRole('slider');
+    const sliderInput = screen.getByRole('textbox');
+
+    expect(slider).toHaveAttribute('aria-valuenow', '15');
+    expect(sliderInput).toHaveValue('15');
   });
 
-  it('allows for custom values to be set in the input', () => {
-    const wrapper = mount(<Slider {...sliderProps} value={10} min={10} max={100} />);
-    const sliderInput = wrapper.find('input');
-    sliderInput.simulate('focus');
-    sliderInput.simulate('change', { target: { value: 50 } });
-    sliderInput.simulate('blur');
-    expect(wrapper.html()).toContain('aria-valuenow="50"');
+  it('allows for custom values to be set in the input', async () => {
+    render(<Slider {...sliderProps} value={10} min={10} max={100} />);
+
+    const slider = screen.getByRole('slider');
+    const sliderInput = screen.getByRole('textbox');
+
+    await user.clear(sliderInput);
+    await user.type(sliderInput, '50');
+
+    expect(slider).toHaveAttribute('aria-valuenow', '50');
+    expect(sliderInput).toHaveValue('50');
+
+    // click outside the input field to blur
+    await user.click(document.body);
+
+    expect(slider).toHaveAttribute('aria-valuenow', '50');
+    expect(sliderInput).toHaveValue('50');
   });
 
-  it('defaults after blur if input value is outside of range', () => {
-    const wrapper = mount(<Slider {...sliderProps} value={10} min={10} max={100} />);
-    const sliderInput = wrapper.find('input');
-    sliderInput.simulate('focus');
-    sliderInput.simulate('change', { target: { value: 200 } });
-    // re-grab to check value is out of range before blur
-    const sliderInputIncorrect = wrapper.find('input');
-    expect(sliderInputIncorrect.get(0).props.value).toEqual('200');
+  it('sets value to the closest available one after blur if input value is outside of range', async () => {
+    render(<Slider {...sliderProps} value={10} min={10} max={100} />);
 
-    sliderInput.simulate('blur');
-    expect(wrapper.html()).toContain('aria-valuenow="100"');
-    // re-grab to check value is back inside range
-    const sliderInputCorrect = wrapper.find('input');
-    expect(sliderInputCorrect.get(0).props.value).toEqual('100');
+    const slider = screen.getByRole('slider');
+    const sliderInput = screen.getByRole('textbox');
+
+    // Check what happens above the maximum value
+    await user.clear(sliderInput);
+    await user.type(sliderInput, '200');
+    expect(sliderInput).toHaveValue('200');
+    expect(slider).toHaveAttribute('aria-valuenow', '100');
+    await user.click(document.body); // click outside the input field to blur
+    expect(sliderInput).toHaveValue('100');
+    expect(slider).toHaveAttribute('aria-valuenow', '100');
+
+    // Check what happens below the minimum value
+    await user.clear(sliderInput);
+    await user.type(sliderInput, '1');
+    expect(sliderInput).toHaveValue('1');
+    expect(slider).toHaveAttribute('aria-valuenow', '10');
+    await user.click(document.body); // click outside the input field to blur
+    expect(sliderInput).toHaveValue('10');
+    expect(slider).toHaveAttribute('aria-valuenow', '10');
   });
 });