different content of the site for mobile devices and PC with similar resolutions

I need to have the following elements on my site displayed at the frontpage at the very same place independenly from each other:

1 a slider for smartphones only with resolutions up to 992 px width ( already have it) 2 a slider for tablets only with resolutions up to 2048 px width ( need to add) 3 a slider for PCs only with resolutions starting from 1024 px width ( already have it)

As you can see from the requierements resolutions of PCs and tablets intersect so that as far as I understand it is impossible to use basic @media queries (and "handheld" is no longer functioning properly)

I have the following .js included in my site's header for different purposes, but I feel it can be helpful because it helps add css to devices with touchscreens and PCs separately.

<script>
document.documentElement.className += 
(("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
</script>

Does anyone know a proper way of having independent sliders for 3 categories without situations, when two of them are displayed at once?

The site adress: poiskdetei.ru.

Thank you!

via Chebli Mohamed